1

我已经阅读了一堆关于在 div 中拟合图像的帖子，但还没有解决我的问题：

我有一个响应式网页设计，将容器 div 的高度设置为浏览器窗口高度，然后将图像加载到 flexslider 中。大多数图像将大于浏览器视口。

我的问题是我可以使照片正确地适应宽度，但图像永远无法正确调整高度。请参阅http://stineheilmann.dk/portfolio/shoes/（图片编号 3）

如何确保图片始终保持在包含的 div 内，同时保持纵横比？

4

2 回答 2

2

有浏览器限制吗？你在寻找类似这个演示的东西吗？

CSS

.frame{width:300px;height:300px;padding: 2px; border:1px solid #ccc;margin:5px;}
.frame img{max-width:100%;max-height:100%;}

HTML将类似于

<div class="frame">
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/>
</div>
<div class="frame">
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/>
</div>

更新：我已经用三个不同纵横比的图像更新了演示，这些图像适合 div，而不会歪斜或溢出 div。

于 2012-11-23T11:11:03.433 回答
0

只需将此 CSS 添加到以下选择器中：

.flexslider .slides img {
    height:100%;
    ....
}
于 2012-11-23T11:11:40.633 回答