背景图像宽度应溢出，固定高度答案

【问题标题】：Background Image width shall overflow, Fix height背景图像宽度应溢出，固定高度
【发布时间】：2013-10-24 12:44:02
【问题描述】：

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

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

我试过了

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

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

有什么想法吗？

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

编辑：

从 Bigood 的回答中，我需要这个居中：http://jsfiddle.net/H75BT/1/

【问题讨论】：

在 jsFiddle 上重现你的错误。我们不知道你的代码..
屏幕截图在这里不好。您需要以某种形式的代码重现您的问题。因为这是不可能回答的。
jsfiddle.net/H75BT 在这里。您必须水平拉动窗口。我不想有高度溢出
您的问题非常不清楚。 Is this what you want?
是的！！！但现在图像只在右侧消失。 IT 应该从左侧和右侧移出。你明白吗？ bockt.de/link/screen.jpg

标签： html css resize height overflow

【解决方案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%;
}

Working demo

编辑

您可以使用 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>。

Centered image demo

【讨论】：