I created a simple div with aspect-ratio property set as a child of another div. The inner div have to fill whole possible space (but still respect passed aspect ratio).

It works as expected on chromium based browsers, but on firefox it seems like its ignoring the aspect-ratio when width: 100% is set and inner div end up stretched.

.box {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
}

<div class="container">
  <div class="box">
    Sample content
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

the aspect-ratio is a weak declaration so what you get in Firefox can be considered as correct because the element is respecting width and max-height prior to aspect-ratio. I would even say that the behavior of Chrome is the wrong one.

Worth to note that aspect-ratio only set a preferred aspect ratio ^ref to give a similar behavior to image element that have intrinsic aspect ratio. It was never meant to force the ratio of the element.

Use image in your example and you will get the same result as in Firefox

.box {
  width: 100%;
  max-height: 100%;
  /*aspect-ratio: 1 / 1;*/
}

.container {
  height: 50vh;
}

<div class="container">
  <img src="https://picsum.photos/id/237/300/300" class="box">
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The above will give you a stretched image which confirm the correct behavior of Firefox

CodePudding user response：

Using max-width: 100% instead, works fine for me in chrome and firefox:

.box {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
}

<div class="container">
  <div class="box">
    Sample content
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>