在 div 内按比例适合图像 - 图像不应该被剪裁

Question

i've read a bunch of posts on fitting an image inside a div, but none solved my problem yet:

I have a responsive webdesign that sets the height of the container div to the browser window height, and then loads images into a flexslider. Most of the images will be larger than the browser viewport.

My problem is that I can make the photos fit the width correctly, but images never adjust the height properly. See http://stineheilmann.dk/portfolio/shoes/ (picture no. 3)

How do I ensure that the picture always stays inside the containing div, while maintaining the aspect ratio?

Answer 1

Are there any browser restriction? Are you looking for something like 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 would be something like

<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>

Update: I have updated the demo with three images of different aspect ratios, that fit in the div without getting skewed or overflow out of the div.

Answer 2

Just add this CSS to the following selector:

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