W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2020

Re: [csswg-drafts] [css-sizing-4] aspect-ratio: minimum/maximum instead of preferred (#5463)

From: ferenci84 via GitHub <sysbot+gh@w3.org>
Date: Sun, 23 Aug 2020 07:36:17 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-678740928-1598168176-sysbot+gh@w3.org>
I may have missed something, but I get substantial difference when (supposing the container width is 100px) using `height: 100px; max-height: max-content` contra `height: max-content; max-height: 100px`

In use case https://github.com/w3c/csswg-drafts/issues/4636 the author wanted to apply aspect ratio as a minimum. In my use-case the aspect ratio should be the maximum.

#### Example

Let's suppose there is an image (1) with 50px height and 100px width, and an other image (2) with 100px width and 50px height, within a container with your specified rule with a width of 100px.

With `height: 100px; max-height: max-content` rules set, if I set the width of the image (within the container) to 100%, the rule works well for image 1:
1. width of the container is 100px
2. preferred height of the container is 100px due to aspect-ratio
3. the image width is set to 100px
4. the image height: auto determines the height of 50px
5. the max-height of the container is set to 50px, resulting the calculated width/height 100px/50px as wanted

For image 2, the same rule will not work:
1. width of the container is 100px
2. preferred height of the container is 100px due to aspect-ratio
3. the image width is set to 100px
4. the image height: auto determines the height of 200px
5. the max-height of the container is set to 200px, resulting the calculated width/height 100px/200px

For image 2 in order to work, I'd need to set the image height to 100% while leaving the width at auto, resulting the sequence:
1. width of the container is 100px
2. preferred height of the container is 100px due to aspect-ratio
3. the image height is set to 100px
4. the image width: auto determines the height of 50px
5. the max-height of the container is set to 100px

With `height: max-content; max-height: 100px` I get bad results with setting only the height or width to 100% (I'm not sure what sequence of determining the sizes causes overflow/bad sizing), however with setting both to 100% with rules `width: 100%; height: 100%; object-position: center; object-fit: contain;` everything works well.

-- 
GitHub Notification of comment by ferenci84
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5463#issuecomment-678740928 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 23 August 2020 07:36:24 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:13 UTC