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

On Wed, Apr 25, 2012 at 2:11 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> 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; }

The author didn't *really* ask for this, though - it's just a default
behavior that's kinda confusing.

In fact, this is a potentially issue for *all* replaced elements,
since they all have intrinsic sizing that we usually expect they'll
adhere to.

However, working around it, while still allowing the author to stretch
these things when they want to, would require an additional magic
value for the initial value.  (We can't use "auto", because that's
already used to mean "compute to what my parent says is my default".)
I'm not sure that's worth it.

~TJ

Received on Wednesday, 25 April 2012 22:39:23 UTC