This article was first published in the public number: Distorted, if you feel good, welcome to pay attention to!

preface

Last year around this time, we published an article about CSS’s fixed-aspect ratio implementation, which summarized how to answer the fixed-aspect ratio implementation question from an interviewer’s perspective. If you are not familiar with historical hacks, it is advisable to browse the original article first.

At the end of the original article, aspect-ratio was mentioned. However, there was no browser implementation at that time, now there are some new developments in the standard and implementation, here again with you synchronization.

This article introduces the current state of the art with browser implementations and standards, and explains how they are used.

Here, I would like to thank my fellow digger “Crickets 00” for reminding me of the comments and encouraging me to update 😂.

Browser implementation and standards status

On January 19, 2021, Chrome released Chrome 88, an update that included aspect-ratio implementations. See Chrome 88 update for more details.

Edge now uses the Chrome kernel, so it also supports aspect-ratio.

In addition, aspect-ratio is already supported in Safari’s technical Preview (download address), see the Safari Technical Preview release log for version 118.

Safairi has requirements for macOS versions, so I didn’t verify on the browser in the spirit of a cautious upgrade.

Aspect -ratio has also been supported in Firefox since version 81. However, you need to enable the corresponding configuration. Enter about:config in the address bar, then search for layout.css.aspect-ratio. Enabled and set it to true.

So far, browsers are pretty good at implementing aspect-ratio. The relevant specifications were also updated with a version of the working group draft last October.

So it’s time to get up and learn again. I hope you can still learn 😂. Let’s start with the specification and see how it’s used.

The specific use of aspect-ratio

As mentioned in previous articles, elements such as images and videos have an inherent aspect ratio that is related to the content of the material itself. CSS layout algorithms try to maintain the size of elements as they change.

A similar effect cannot be achieved for non-replacement elements. Aspect-ratio is a solution to this scenario. You can specify the desired aspect ratio for non-replacement elements, and CSS layout calculations will be based on the given value.

In addition, this property can be used to modify the inherent aspect ratio of replaceable elements.

Aspect-ratio can be used for elements other than inline boxes and tables, default is auto, inheritance is not supported, and percentage values xx% are not supported.

Aspect-ratio supports three types of values:

  • auto: Default value, same behavior as before; In this case the size calculation is only consideredcontent-boxContent boxes.
  • <ratio>Through:width / heightFormat to specify the aspect ratio, you can specify a decimal, not a percentage value;Then the dimensions are calculated withbox-sizingThe specified value is associated with.
  • auto && <ratio>: If both are specifiedauto 和 <ratio>Value if the element being applied is a replaceable elementautoIf not, use the specified<ratio>. In this case, the dimensions are calculated according tocontent-boxContent box calculation.

Specifying an aspect ratio for an element does not make it replaceable, which should make sense. The reason for saying this is that some layout rules that apply only to replaceable elements do not apply to non-replaceable elements by specifying aspect ratios. For non-replacement elements, context-self: normal is equivalent to stretch, not start.

If the width and height of the element are not auto, then aspect-ratio is invalid, that is, one of the width and height must be auto.

The above is the basic usage of aspect-ratio. Let’s look at some examples.

For the convenience of display, except for the general CSS style of the box shown below, the other code is shown in the text in the picture, not attached separately.

background-color: salmon;
margin: 10px auto;
display: block;
text-align: center;
line-height: 2;
white-space: pre-line;
Copy the code

1. The height is fixed and the width is proportional

2. The width is fixed and the height is proportional

3. The width is fixed, the height is proportional, the value is decimal, the effect is the same as above

4. When there is a border or inside margin, the default is that the content area is proportional

You can see the content area below, the red area has a ratio of 2/1

Of course, box-sizing can change this behavior. You can see that the ratio of the whole area is 2/1

5. Modify the aspect ratio of replaceable elements

throughapect-ratioYou can modify the aspect ratio of replaceable elements if both elements are setauto 和 <ratio>, the substitutable element is appliedauto, while non-replaceable elements use the specified ratio. As shown below, the size of the upper part of the image is changed to square, and the lower part will be appliedauto​:

6. Automatically calculates the minimum size based on the content by default

To avoid unexpected overflow situations, if you do not explicitly specify the overflow value, when content overflows, the element will break the set aspect ratio. / overflow: hidden; .

The two blocks in the figure below contain overflow by default, and the figure below specifies overflow: auto; Is displayed according to the expected behavior.

You can also avoid this problem by specifying min-width/min-height. I won’t post code and diagrams here, so you can try it out.

If you are careful, you may notice that the aspect-ratio priority is higher than min-width/min-height. Even if min-width/min-height is specified, the layout calculation will try to meet the specified aspect ratio.

Compatibility writing

Although the browser support has been gradually, but the support is not enough, if you want to try it, you can try the following compatibility:

.box { width: 4rem; aspect-ratio: 1 / 1; } @supports not (aspect-ratio: 1 / 1) { .box { height: 4rem; width: 4rem; }}Copy the code

conclusion

That’s all. I hope it’s helpful.

This article was first published in the public number: Distorted, if you feel good, welcome to pay attention to!

Refer to the link

  1. New in Chrome 88: aspect-ratio
  2. New in Chrome 88
  3. The CSS specification