The aspect-ratio attribute of CSS is used to control the aspect-ratio ratio of an element. Its syntax is aspect-ratio: width / height;, for example.box { aspect-ratio: 16 / 9;} means that the element always maintains a ratio of 16:9. 1. It is often used to maintain proportions in image containers, such as square avatar frames; 2. Responsive video embedding to keep the iframe at a 16:9 ratio; 3. Notes include: only effective when not fixed width or one in high school, not suitable for inline elements, different from object-fit, mainstream browsers have already supported, but older versions may need to be replaced by padding techniques. Mastering aspect-ratio simplifies proportional control in responsive layouts.

aspect-ratio attribute of CSS is used to control the aspect ratio of an element, which allows you to easily maintain a specific aspect ratio of an element at different sizes. This is especially useful in responsive designs, such as when embedding videos, image displays, or grid layouts.

How to use aspect-ratio

The syntax of this property is simple:

 element {
  aspect-ratio: width / height;
}

For example:

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

Indicates that the width and height of this .box element always maintain a ratio of 16:9. If the width is 320px, the height will automatically adjust to 180px (because 320 ÷ 16 × 9 = 180).

It should be noted that if you set width and height at the same time, the browser will decide whether to apply aspect-ratio based on these two values. That is, aspect-ratio will only work if you don't have the dimensions that fix one of the directions.

Common usage scenarios

1. Keep the picture container proportion

You may want a picture container to keep a certain proportion of the content displayed no matter how the screen changes, so that the page looks neat. For example, make a square avatar frame:

 .avatar {
  aspect-ratio: 1 / 1;
  width: 100px;
}

This ensures that .avatar is a 100×100 square.

2. Responsive video embedding

When embedding YouTube videos in web pages, it is often necessary to make the iframe automatically adapt to different device widths but still maintain a 16:9 ratio:

 <div class="video-container">
  <iframe src="..."></iframe>
</div>

Cooperate with CSS:

 .video-container {
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

In this way, no matter how wide the parent container is, the iframe will scale to scale.

Notes and compatibility

• Browser support : mainstream modern browsers have already supported aspect-ratio , including Chrome, Edge, Firefox and Safari. But if you still need to be compatible with some old versions, you may need to use padding techniques to make compatibility.
• Comparing with traditional padding techniques : we used to use "padding-top percentage" for proportional control, but now with aspect-ratio , the code is more concise and intuitive.
• It cannot be used on inline elements : In-line elements such as <span></span> are not suitable for setting this attribute.
• Don't be confused with object-fit : aspect-ratio controls the size ratio of the entire element, while object-fit controls how the content (such as pictures) is displayed in the container.

Basically that's it. Mastering aspect-ratio can help you save a lot of trouble in manually calculating width and height, especially when making responsive layouts.

The above is the detailed content of Explain the CSS `aspect-ratio` property. For more information, please follow other related articles on the PHP Chinese website!