A First Look at `aspect-ratio`

CSS ushers in a new attribute that affects the size of the box - aspect-ratio ! This is a big event. While there are already many ways to create boxes with specified aspect ratios (I think a solution based on custom properties is the best), none is particularly intuitive and certainly not as simple as declaring a single property.

With aspect-ratio attribute (MDN, not to be confused with media query versions) coming, I want to look into how it works and try to understand it.

Thanks to Una for letting me see this property first, it really attracted a lot of people. Here are some of my attempts.

Using aspect-ratio on elements alone will calculate the height based on the automatic width.

Without setting the width, the element still has a natural automatic width. Therefore, the height can be calculated based on the aspect ratio and render width.

 .el {
  aspect-ratio: 16 / 9;
}

If the content exceeds the aspect ratio, the element will still expand.

In this case, the aspect ratio will be ignored, which is actually good. This is why pseudo-element strategy is popular for aspect ratios, as it does not lead to dangerous data loss or awkward overlap when there is too much content.

However, if you want to limit the height to the aspect ratio, you can do it by adding min-height: 0;

If an element has one of height or width , the other is calculated based on the aspect ratio.

So aspect-ratio is basically a way to set another dimension when you have only one dimension.

If the element has both height and width , then aspect-ratio is ignored.

An explicit combination of height and width is "stronger" than aspect ratio.

Consider min-* and max-*

There is always some tension between width, minimum width, and maximum width (or height version). One of them always "wins". Usually this is intuitive.

If you set width: 100px; and min-width: 200px; , min-width will win. So min-width is either ignored (because you've already surpassed it) or won. The same is true for max-width : if you set width: 100px; and max-width: 50px; , max-width will win. So max-width is either ignored (because you are already below it) or won.

It seems that this common intuition applies here too: min-* and max-* attributes either win or don't matter. If they win, the aspect ratio will be destroyed.

 .el {
  aspect-ratio: 1 / 4;
  height: 500px;

  /* is ignored because the width is calculated as 125px */
  /* min-width: 100px; */

  /* Win, making aspect ratio 1 / 2 */
  /* min-width: 250px; */
}

Use value functions

In fluid situations or at any time when you basically don't know a dimension in advance, aspect ratios are always the most useful. But even if you don't know, you often impose constraints on things. For example, 50% width is good, but you just want to shrink it down to 200px. You can use width: max(50%, 200px); . Or use clamp(200px, 50%, 400px); to impose constraints on both sides.

This looks intuitive:

 .el {
  aspect-ratio: 4 / 3;
  width: clamp(200px, 50%, 400px);
}

But, suppose you encounter a minimum value of 200px and then apply min-width of 300px? min-width wins. It's still intuitive, but it can be confusing because of the many properties, functions, and values ​​involved.

Maybe it would be helpful to think of aspect-ratio as the weakest way to determine the size of an element?

It never outweighs any other size information, but if there is no other available information in the dimension, it will always perform its resizing.

The above is the detailed content of A First Look at `aspect-ratio`. For more information, please follow other related articles on the PHP Chinese website!