Limit image width on portrait orientation images / preserve aspect ratio

Question

I have flexslider set up on a responsive site. The slider I am creating takes both landscape and portrait orientation images. I have smoothHeight: true set so the height adjusts to fit the images.

At the largest media query the flexslider container is 750px wide. This is fine for landscape orientation images but portrait orientation images become way too big. The width of the portrait image gets set to same size as the container - 750px wide, and so the height is at least double that and so you cannot view the whole image without scrolling.

In the css I tried setting max-height: 750px which solves the height problem but flexslider then stretches the image to fit 750px wide by 750px high.

Does anyone know of any way to get flexslider to preserve the aspect ratio and adjust the width of the image based on the max-height? So that the portrait images would be 750px high but maintain their aspect ratio.

iegik iegik · Accepted Answer · 2012-11-02T19:49:14

I Don`t understand about which functionality of Flexslider you talking - on zooming image or that thumbnails in scrolled toolbar? Whatever, there is one solution for both situations:

<style>
figure {
    outline: green solid 1px;
    padding: 2px;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;

    outline: red solid 1px;
    opacity: .5;
}
.scale img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
.toheight img{
    max-width: none;
}
</style>
<figure class="scale toheight" width="200" height="200">
    <img src="http://placekitten.com/250/300"/>
</figure>

Solution for crop or scale image within container http://jsfiddle.net/iegik/ZzXru/

Related question: How to align cropped element horizontally?

Limit image width on portrait orientation images / preserve aspect ratio

2 Answers