W3C home > Mailing lists > Public > www-style@w3.org > April 2012

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

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 25 Apr 2012 14:11:45 -0700
Message-ID: <4F986891.4090205@inkedblade.net>
To: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:52 GMT