Is there a difference between using one or the other, or are they identical?
https://jsfiddle.net/g5hfLvt7/
.frame-inner {
width: 100%;
height: auto;
aspect-ratio: 16/9;
background: transparent;
}
https://jsfiddle.net/p5ogae30/
.frame-inner {
width: 100%;
height: 0;
padding-top: calc(9 / 16 * 100%);
background: transparent;
}
You can check if âaspect-ratioâ has enough browser compatibility:
The aspect-ratio property is relatively new to CSS.
padding-top is how people did this before aspect-ratio existed. So you may use that to support older browsers where aspect-ratio doesnât work.
Personally I use the pre-calculated value of padding-top: 56.25; instead of using calc(). Though calc() has good support now, I see no need to give the browser extra work when the values are fixed. I use calc() if values to be calculated are variable, relative or mixed units.
I was unaware of aspect ratio and I tried it out. I tried to replicate 16/9 ratio padding-top percentage. I needed a max height as well (so 16/9 ratio but cap out at 700px for example). Aspect ratio doesnât seem to like that and restricted the width when the height was reached. Bit unfortunate that this property has this bug/feature but at least itâs there if I need it in the future 
.
Perhaps I am not understanding you, but if you specify the aspect ratio of an image (say) and specify its maximum height, I would expect the width to be restricted when the maimum height is reached. Otherwise the image would become stretched horizontally.
I am finding that Firefox stretches an image horizontally when maximum height is reached, not maintaining the specified fixed aspect ratio. This does not happen in Chrome and Edge so in my view is a Firefox bug.
(EDIT: I think a significant factor is that I was testing using Flexbox.)
To be fair, its not the property that has a bug, its that particular browserâs interpretation of the property. CSS merely defines the standard, not the implementation. 
I understand that - thatâ why I said âbug/featureâ as I was just explaining its behavior. I described it as such since some people may like that behavior, some may not.
What if you did that to a background image container? Like I was attempting . Itâd be useful there .
For an image in a container you can use object-fit:contain or object-fit:cover. For a background image you can use background-size:contain or background-size:cover.
I suggest you check what happens in different browsers.
I understand there are many many workarounds. Within minutes of finding the limitation, I just implemented a different way of doing it. I was merely trying to see what the limits / bounds were for aspect-ratio. It would have been useful, but Iâm just pointing out that there are downfalls to the property that are inconvenient .
That seems like expected behaviour to me. The sole purpose of this property is to maintain the aspect ratio of an element.
I think the intended use case is for things like video embeds where maintaining the correct aspect ratio is important, regardless to what happens to the size or available space.
Right - as I said, âfeature/bugâ, however you want to classify it as. It could go both ways. I could have seen implementation allow for a max height on aspect-ratio and wanted to try it out.
My specific use case is exactly that - for video. I needed to do video aspect ratio but cap it out at 700px. To prevent it from getting too large on wider screens. It would make use of object-fit: cover also.
When you use the aspect ratio property then the browser will maintain that aspect ratio as long as width and height are not used together (or variations of min-width and max-height or vice versa). If you said width:300px and height:300px then the aspect ratio property is ignored as the browser assumes you want to set it at that size explicitly. (This also applies to the container that holds the video)
More info about that point here.
Just use a max-width because you know itâs 16/9 so the width will be 1244px at 700px height
It needed to be full width - the max height was the only restriction.
Sorry I thought you said this Ryan.
If you want 100% width and a max height then you donât want aspect ratio. Indeed if you put a max height you get exactly what you ask for ?
I think I may need to read the thread again as it doesnât add up for me :).
I would have liked a max height actually stop the width from expanding but as I said above a max width will do that anyway.
I guess Iâve not understood the question properly
I have been trying out aspect-ratio and found this is the case, either max-height or max-width can be used to cap the size.
I also found the property does not seem to work directly on an image or iframe, I have had to apply it to a container for an iframe.
Interestingly, you donât need to give the iframe absolute positioning and you can give it height: 100% without giving a specific height to the container. Using absolute positioning with top and bottom set to 0 doesnât work, which is what I tried first.
Yes thatâs more or less what I was getting at. You can use one or the other but you canât have a width and a max-height or aspect ratio is ignored when both are activated.
The problem with a max height approach is that there may not be enough screen width for the box and so you may get a scrollbar depending on circumstance which is why I recommend a max-width instead.
You canât have a max-width:100% on the image and a max-height because then aspect ratio is ignored as mentioned in that article. Also note that in your demo the aspect ratio is doing nothing to your image because it already has that aspect ratio. Try removing the aspect ratio and you will see the image is unchanged in behaviour as its only your box that is being sized and of course your image will fit it exactly. The video on the other hand is sized to fit the box so is different.
Iframes always liked height and width values (IIRC) when using absolute positioning so top and left is best when being absolutely placed but as you say in the aspect ratio box they seem to be able to use width:100% and height:100% ok.
Itâs quite a hard property to test though and work out what the results actually are
This was in reference to the height. I do see how itâs sort of unclear in its delivery . I meant I wanted to prevent it from getting too tall on wider screens. I wanted aspect-ratio of a video (16/9), full width, but max height of 700px. That is what I wanted to see if it was possible and it turns out it isnât. Just thought Iâd share my experience here .
It made for a good discussion and made us all get our hands dirty in testing
I must admit it took me a while to work out exactly how the aspect ratio was working.
I would normally go with max-width in practice. I was just experimenting with it here, with the suggestion here there was a problem with it.
Yes, aspect ratio is fairly redundant of an image, since itâs not difficult to keep an imageâs aspect with âregularâ CSS. Again just throwing things into the experiment, maybe without fully thinking it though.
The iframe is a more plausible use case.
This is what I initially did:-
position: absolute;
top: 0;
bottom: 0;
left:0;
right: 0;
But the content did not display properly in the frame, like the content was larger and overflowing. I saw the same result with both the 360 image embed and a Youtube video embed.
Changing to width and height at 100% fixed it.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.