The aspect-ratio attribute of CSS is used to set the aspect ratio of an element, such as 16:9 or 4:3, so that the browser automatically calculates the height or width based on the proportion. Common usage scenarios include: 1. Keep the proportion of the picture container to avoid deformation; 2. The video embedding is more stable without padding skills; 3. The unified cell proportion in the grid layout. Notes include: After setting width and height, aspect-ratio may fail. Pay attention to browser compatibility and adjust the image display effect with object-fit.

aspect-ratio attribute of CSS allows you to easily control the aspect ratio of elements, avoiding the use of padding hack or JS to implement responsive layouts. It is especially useful in picture, video containers and grid layouts.

What is aspect-ratio?

The role of aspect-ratio is to set the aspect ratio of an element, such as 16:9 or 4:3. The browser will automatically calculate the height or width based on this scale, depending on whether you have set the dimensions in one of the directions.

Let's give the simplest example:

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

In this way, no matter what the width of .box is, its height will automatically be adjusted to a ratio of 16:9.

Common usage scenarios

Picture container maintains proportion

When making responsive web pages, images often cause the layout to "deform". You can add aspect-ratio to the image container so that it always maintains a fixed proportion.

 .image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This way, the container can be filled without being stretched regardless of the original size of the picture.

Video embedding is more stable

Many websites use padding techniques to maintain proportions when embedding videos. Now you can directly use aspect-ratio to simplify the code.

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

Just put <iframe> in HTML, and you don’t have to write extra styles to expand the height.

Uniform proportion of cells in grid layout

In a CSS Grid layout, you can also use it in combination with aspect-ratio if you want each grid item to remain the same proportion (such as a gallery page).

 .grid-item {
  aspect-ratio: 1;
}

In this way, each grid item is a square and will not be deformed due to different contents.

Notes and compatibility

• Priority issue : If you set width and height at the same time, aspect-ratio may be ignored. It will work when only one direction size is set.
• Browser support : Mainstream modern browsers are already supported, including Chrome, Edge, Firefox, and Safari (starting around 2022). If you need to be compatible with the old version of IE, you still have to use the padding solution.
• What should I do if the ratio conflicts with the picture itself? If the image itself has an aspect ratio but the parent container has aspect-ratio set, cropping or white space may occur. At this time, remember to adjust the display effect with object-fit or object-position .

Basically that's it. aspect-ratio is a very practical but easily overlooked property, especially in responsive design, which can save a lot of trouble. It is not complicated to use, just pay attention to its working mechanism and scope of application.

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