html - 背景图片宽度会溢出，固定高度

Question

我想为图像设置高度 100% 和宽度溢出，以便在每个屏幕上都可以轻松访问顶部菜单（红色按钮）和页脚菜单。

左侧和右侧站点可能溢出。

我试过了

.stretch {
  width:100%;
  height:auto;
}

没有成功。并且更改值会使图像全屏并且没有预期的效果。

有任何想法吗？

这是一个小提琴：http: //jsfiddle.net/H75BT/2/

---

编辑：

根据 Bigood 的回答，我需要将其居中：http: //jsfiddle.net/H75BT/1/

Answer 1

在 html 和 body 上应用 100% 高度，并定义您.stretch将使其高度适应 body 的高度，并重新计算其宽度以保持比例：

html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow-x:hidden; /* Add this to prevent the body to adapt its width if you need */
}


.stretch {
    width:auto;
    height:100%;
}

工作演示

---

编辑

您可以使用 CSS 使其居中background：

.stretch {
    background-image: url("http://bockt.de/link/home.jpg");
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: cover;
    height: 100%;
    position: relative;
    background-origin: padding-box;
}

带一个<div class="stretch"></div>.

居中的图像演示