CSS3 Flexbox Supports Image Aspect Ratio

Question

Using the Flex flex model, how can I get an image to maintain its aspect ratio?

JS Fiddle http://jsfiddle.net/xLc2Le0k/2/

Note that images fill or shrink to fill the width of the container. This is great, but can we also stretch or compress the height to maintain image proportions?

HTML

<div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> 

CSS

 .slider { display: flex; } .slider img { margin: 0 5px; } 

Answer 1

For img tags, if you define one side, the other side is resized to maintain aspect ratio and, by default, images expand to their original size.

Using this fact, if you transfer each img tag to a div tag and set its width to 100% of the parent div, the height will correspond to the proportion as you wish.

http://jsfiddle.net/0o5tpbxg/

 * { margin: 0; padding: 0; } .slider { display: flex; } .slider .slide img { width: 100%; } 

Answer 2

To prevent the images from being stretched in any axis inside the flex parent, I found a couple of solutions.

You can try using snap to an object in the image, for example,

 object-fit: contain; 

http://jsfiddle.net/ykw3sfjd/

Or you can add flexible specfic rules that may work better in some cases.

 align-self: center; flex: 0 0 auto; 

Answer 3

No need to add containing div.

By default, the css property "align-items" is "stretch", which causes your images to be stretched to their full original height. Setting the css property "align-items" to "flex-start" fixes your problem.

 .slider { display: flex; align-items: flex-start; /* ADD THIS! */ } 

Answer 4

Most images are internal sizes that are a natural size similar to a jpeg image. If the specified size defines one of the width and height, the missing value is determined using its own ratio ... - see MDN .

As far as I know, this does not work as expected if images that are set as direct flex elements with the current Flexible Box Layout Module Level 1 module .

See these discussions and error messages may be related:

• Flexbugs # 14 - The internal size of Chrome / Flexbox is not implemented correctly.
• Firefox Bug 972595 - Flex containers should use "flex-basis" instead of "width" to calculate the internal width of flexible elements
• Chromium Issue 249112 - In Flexbox, enable the internal aspect ratio to report the calculation of the main size.

---

As a workaround, you can wrap each <img> with <div> or <span> or so on.

jsFiddle

 .slider { display: flex; } .slider>div { min-width: 0; /* why? see below. */ } .slider>div>img { max-width: 100%; height: auto; } 

 <div class="slider"> <div><img src="https://picsum.photos/400/300?image=0" /></div> <div><img src="https://picsum.photos/400/300?image=1" /></div> <div><img src="https://picsum.photos/400/300?image=2" /></div> <div><img src="https://picsum.photos/400/300?image=3" /></div> </div> 

4.5. Estimated Minimum Flex Element Size

To provide a more reasonable default minimum size for flexible elements , this specification introduces a new auto value as the initial value for the min-width and min-height properties defined in CSS 2.1.

---

Alternatively, you can use the table CSS layout instead, which you will get similar results, such as flexbox , it will work in other browsers, even for IE8.

jsFiddle

 .slider { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; } .slider>div { display: table-cell; vertical-align: top; } .slider>div>img { max-width: 100%; height: auto; } 

 <div class="slider"> <div><img src="https://picsum.photos/400/300?image=0" /></div> <div><img src="https://picsum.photos/400/300?image=1" /></div> <div><img src="https://picsum.photos/400/300?image=2" /></div> <div><img src="https://picsum.photos/400/300?image=3" /></div> </div> 

Answer 5

Recently, I have been playing flexbox, and I came up with a solution for this through experimentation and the following reasoning. However, I'm not really sure that this is exactly what is happening.

If the actual width depends on a flexible system. Thus, after the width of the elements reaches the maximum width of the parent, the extra width specified in css is ignored. Then it’s safe to set the width to 100%.

Since the height of the img tag is derived from the image itself, setting the height to 0% can do something. (that’s where I don’t understand that ... but it was clear to me that he had to fix it)

Demo

(remember, saw it here first!)

 .slider { display: flex; } .slider img { height: 0%; width: 100%; margin: 0 5px; } 

Only works in chrome condition

Answer 6

In fact, I found that to maintain the ratio of the image to the image label container, height is required. for example>

 .container{display:flex; height:100%;} img{width:100%;height:auto;} 

then in your html container will pack the tag image

 <div class="container"><img src="image.jpg" alt="image" /></div> 

this work for IE and other browsers

Answer 7

I had the same problem. Use fold alignment to center your elements. You need to use align-items: center instead of align-content: center . This will maintain aspect ratio, while align-content will not maintain aspect ratio.