Aspects of that ratio

What if I tell you that there is a property that adjusts the dimension of an element even if the parent container or the viewport changes? It’s called ‘aspect-ratio’. You can explicitly set the width or height of an element, and ‘aspect-ratio’ will use the dimension set to auto to maintain the specified width-to-height ratio.

.aspect-ratio-box {
  aspect-ratio: 3 / 2;
}

.aspect-ratio-box {
  aspect-ratio: 1.5;
}

If you set both width and height to specific measurements, that will override the aspect ratio, which is both intentional and useful.

Just a couple of tips: first, when used together with flexbox and grid, it works best without the default value, ‘align-items: stretch.’ And lastly, used with images together with ‘object-fit,’ it can work wonders.