jquery - 在 div 中按比例调整图像 - 图像永远不应该被剪裁

Question

我已经阅读了很多关于在 div 中安装图像的帖子，但还没有解决我的问题:

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

我的问题是我可以让照片正确地适应宽度，但图像永远无法正确调整高度。参见 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。