Note: This question about a new feature in CSS: aspect-ratio. Most of the questions on this site with similar keywords are about very different techniques.
Ok so there's a div with the following properties set: width, aspect-ratio, & max-height. Inside of it is another div with height: 100%. Works great in desktop chrome & desktop firefox. Does not work in desktop safari, mobile safari, or mobile chrome.
Here's how it should look (or at least does look in desktop Chrome):
Here's how it looks in mobile Chrome:
Here's the code (jsbin here):
div {
box-sizing: border-box;
}
.con3 {
border: 4px solid black;
width: 200px;
height: 200px;
}
.con2 {
border: 4px solid violet;
width: 100%;
aspect-ratio: 9 / 16;
max-height: 100%;
}
.con1 {
border: 4px solid skyblue;
height: 100%;
aspect-ratio: 9 / 16;
max-width: 100%;
}<body>
<div class="con3">
<div class="con2">
<div class="con1">
hi
</div>
</div>
</div>
</body>Curious about:
- Anyone aware of what's happening here?
- Is there an existing bug filed about this?
- Have any work-arounds that keep the use of
aspect-ratioon the parent?
A workaround I've found is to use position:absolute on the child.