0

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

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

如何做到这一点并让它在以下浏览器中运行：ie8+、Chrome20+、FF20？

4

2 回答 2

0

啊，曾经流行的“我如何制作响应式图像？” 好吧，在您的事业中，除了您在图像上设置指定的高度之外，一切照旧。

http://jsfiddle.net/aMhbz/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 */
}
于 2013-08-17T21:26:48.937 回答
0

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

img {
    width: 100%;
}

当你想要一个设定的高度时，你应该将图像包装在一个隐藏溢出的 div 中。它将根据您的需要进行扩展等。

已编辑

演示http://jsfiddle.net/vYdBt/136/

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

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

演示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;
}

这也会使图像垂直居中

于 2013-08-17T21:27:15.640 回答