CODEWITHSUNDEEP
cssimagegoogle-chromeflexbox
peardrops
peardrops

Reputation: 109

Image as a flex item not scaling with max-width in Chrome

I have an image within a flex container.

The image stays at its original height in Chrome and will not resize proportionally. It works in Firefox however.

<figure>
 <img src="image.jpg">
 <a href="#">A link to somewhere</a>
</figure>

figure {
 display: flex;
 width: 100%;
}

figure img {     
 max-width: 50%;
 height: auto;
}

Upvotes: 0

Views: 576

Answers (1)

LeBen
LeBen

Reputation: 2049

Flex makes its children equal in height by default. To disable this behavior, you can specify align-items: flex-start.

https://jsfiddle.net/3s2hLv92/1/

Upvotes: 1

Related Questions