- From: ferenci84 via GitHub <sysbot+gh@w3.org>
- Date: Sun, 23 Aug 2020 07:36:17 +0000
- To: public-css-archive@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