在div中按比例拟合图像 - 永远不应剪切图像

Question

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

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

我的问题是我可以使照片正确地适合宽度，但图像从不正确调整高度。见http://stineheilmann.dk/portfolio/shoes/（图片编号3）

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

Answer 1

是否有浏览器限制？你在找this demo之类的东西吗？

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。

Answer 2

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

.flexslider .slides img {
    height:100%;
    ....
}