Re: [css3-flexbox] flex-align: stretch on <img>

On 04/25/2012 02:02 PM, Daniel Holbert wrote:
> I think just ran across a simple case where "flex-item-align:stretch"
> (the default behavior) is somewhat problematic.
>
> Consider this example (where "photo.jpg" is a 50px-by-50px image):
>
>   <div style="display: flexbox; width: 100px; height: 100px">
>     <img src="photo.jpg"/>
>   </div>
>
> The<img>  has an intrinsic height and width, which the author presumably
> wants to use, since he hasn't specified any other width or height there.
>
> However, since the<img>  has "height: auto" and effectively
> "flex-item-align:stretch" (default values), the flexbox spec says we
> need to force the<img>'s height property to resolve to 100px:

I think that's fine. This is what the author asked for; perhaps
he is using the image in a way that stretching makes sense. Or
perhaps he's set object-fit: contain; on it. As you say, this
can be easily turned off with e.g.
   img { flex-item-align: center; }

~fantasai

Received on Wednesday, 25 April 2012 21:12:17 UTC