1491823 - parent width with scaled <img> take former intrinsic size of img and not resized one

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Notyrgd]

Attachment: square.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

Firefox v62.0 (64bits). OsX El Capitan

The purpose of this is to be able to create a fixed aspect ratio div that fits the smaller size of its parent div, regardless of the size and aspect ratio of the parent. In this example I use a square, aspect ratio 1/1.

To reproduce, please visit 

https://codepen.io/Notyrgd/pen/RYeRoE 

or use the attach file that embeds CSS.

Behaviour is perfect with Chrome and Safari. But bug with firefox.

The idea is to use a fixed ratio image but with no intrinsic size that will be resized and impose its sizing to its parent.

In my example:
#container is the outermost div. Let's say its height is H.
#widthwrapper has height: 100% = H and its width: fit-content the img
#imgwrapper has height: 100% = H so its width = H (1/1 img)
So #widthwrapper would have a height = H



Actual results:

#imgwrapper is correctly resized to H X H
but the width H of #imgwrapper is not propagated to #widthwrapper even with width: fit-content


Expected results:

the width H of #imgwrapper  should propagat to #widthwrapper and give width: fit-content = H

Comment 1

[Notyrgd]

I have investigated a little bit more and updated the codepen to make it more simple.

The problem