Question

在网页中间，我想显示一个从浏览器窗口的左侧延伸到右侧的图像。

当调整窗口大小时，图像应按比例缩小，但我需要图像的可见高度，比如200px，应该保持与图像显示文本上的div相同。我认为“图像窗口”由包含固定高度的div保存。

如何实现这一目标并使其在以下浏览器中运行：ie8 +，Chrome20 +，FF20？

Answer 1

啊，这个曾经很受欢迎的，“我怎么做响应式图像？”好吧，在你的事业中，除了你在图像上设置一个指定的高度之外，它一切正常。

HTML 的

<div id="top"></div>
<div id="image">
    <img src="http://lorempixel.com/1200/200/city/" />
</div>
<div id="bottom"></div>

CSS

#top, #bottom {
    height: 50px;
}
#image img {
    max-width: 100%; /* the responsive part */
    height: 200px; /* same height as image */
}

我的回答基于图像容器进行了一些额外的定位。你也可以这样做：

HTML 的

<img src="your-image.jpg" />
<div>
     <img class="set-height" src="your-image.jpg" />
</div>

CSS

/* for all images to be responsive */
img {
    max-width: 100%;
}
/* specific images */
.set-height {
    height: 200px;  /* the height of your image */
}

Answer 2

只需设置宽度并将高度留空，它将自动缩放

img {
    width: 100%;
}

如果你想要一个设定的高度，你应该将图像包装在隐藏溢出的div中。它会根据您的需要进行缩放等。

<强> EDITED

DEMO http://jsfiddle.net/vYdBt/136/

img {
    width:100%;
}
div {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

链接中的网站使用背景图片。这可以这样做

DEMO http://jsfiddle.net/kevinPHPkevin/vYdBt/135/

div {
    background: url(http://lionssharedigital.com/wp-content/uploads/2013/04/Lion.jpg);
    width: 100%;
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:100% auto;
}

这也会使图像垂直居中

在浏览器窗口中从一侧到另一侧跨越图像

2 个答案: