Limiting image width on image orientation images / maintaining aspect ratio

Question

I have flexslider configured on a responsive site. The slider that I create creates both landscape and portrait orientation images. I have smoothHeight: true set so that the height adjusts to the image.

In the largest media query, the flexslider container is 750 pixels wide. This works great for landscape orientation images, but orientation orientation images get too large. The width of the portrait image is set equal to the size of the container - 750 pixels wide, so the height is at least twice as large, so you cannot view the entire image without scrolling.

In css, I tried setting max-height: 750px , which solves the height problem, but flexslider then stretches the image to a maximum height of 750 pixels to a height of 750 pixels.

Does anyone know how to get flexslider to maintain aspect ratio and adjust image width based on max-height ? So portrait images will have a height of 750 pixels, but retain their aspect ratio.

Answer 1

I don’t understand what kind of Flexslider functionality you are talking about - about scaling an image or about thumbnails in a scrollable toolbar? Regardless, 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 cropping or scaling an image in a container http://jsfiddle.net/iegik/ZzXru/

Related question: How to align a cropped item horizontally?

Answer 2

The image should support its default ratio, if you do not have width: 100%; , and in this case you have to change it to use width: auto, max-height: 750px then your max-height: 750px will have a precedent