chrome不符合flexbox中的图像宽高比

Question

Flexboxes make it easy to make layouts that grow and shrink intelligently based on available space. I was using this feature to draw two images that each take up half of the width of the screen. In Firefox, the images render as expected and maintain their aspect ratio but in Chrome the images are horizontally squashed to 50% each and left at their full height vertically.

Here's a demo of what I'm talking about:

 .flexbox { width: 100%; display: flex; } img { width: 50%; } 

 <div class="flexbox"> <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/2b03b0c4-85f7-4c28-9c60-1c7af2a62fa8_5.jpg" /> <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/b89eff70-398d-4b1b-8806-02458a185c5a_5.jpg" /> </div> 

I've read in an answer to a similar question that this is a Chrome bug. How can I cleanly work around it?

Thanks

Answer 1

The items in a flexbox will stretch their size by default. Seeing you want them to not stretch on the cross-axis (vertical), you can use the align-items on the container, to change the default behaviour.

Fiddle: http://jsfiddle.net/g1vLff23/

CSS

.flexbox {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
img {
  width: 50%;
}

Answer 2

Apply object-fit: scale-down; to the images. Yes, adding height: auto; does not do the trick, unfortunately. Similar issue solved here: max-width of img inside flexbox doesn't preserve aspect ratio

Answer 3

You can solve this by adding the height property to your img rule and giving it a value of auto :

img{
    height:auto;
    width:50%;
}