Question

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

左手侧和右手侧可能会溢出。

我试过

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

取得成功。并且更改值会使图像全屏并且没有所需的效果。

任何想法？

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

修改：

从Bigood的回答中，我需要将这一个集中在一起：http://jsfiddle.net/H75BT/1/

Answer 1

在html＆amp;上应用100％的高度身体，并定义您的.stretch将其高度调整到身体的高度，并重新计算其宽度以保持比例：

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

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

1 个答案:

修改