The aspect-ratio attribute of CSS is used to define the aspect ratio of an element so that it maintains a specific shape when different screen sizes or content changes. 1. Set a fixed aspect ratio through aspect-ratio: 16 / 9; etc. If the height is set or content determines the height, the width will be automatically adjusted to match the ratio, and vice versa; 2. When used in combination with layout tools such as Flexbox or Grid, it is necessary to note that if the width and height are defined at the same time, this attribute may be ignored; 3. It is often used in responsive video containers, picture placeholders and UI cards, avoid using padding techniques or JavaScript to maintain the ratio; 4. It is not suitable for replacement elements such as with its own size, and you need to pay attention to old browser compatibility issues.

The aspect-ratio property in CSS lets you define the ratio between an element's width and height, helping it maintain a specific shape regardless of screen size or content changes. It's especially useful for things like videos, images, or cards that need to keep a consistent layout.

Setting a Fixed Width-to-Height Ratio

You can use aspect-ratio by setting it to two numbers separated by a slash — like aspect-ratio: 16 / 9; . This tells the browser that the width should be 16 units for every 9 units of height.

For example:

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

If the height is set (or determined by content), the width will automatically adjust to match that 4:3 ratio. If only the width is known, the height will be calculated accordingly.

This works best when you have one dimension defined — otherwise, the browser may not have enough info to calculate the other side correctly.

Combining with Other Layout Properties

aspect-ratio plays nicely with other layout tools like Flexbox or Grid, but there are some gotchas:

• If both width and height are defined, aspect-ratio might be ignored.
• In responsive layouts, using aspect-ratio avoids the need for extra padding hacks or JavaScript to maintain proportions.

Here's how you might use it inside a grid:

 .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card {
  aspect-ratio: 3 / 4;
}

Each .card keeps its shape as columns resize, making the layout feel more balanced across devices.

Common Use Cases

Some real-world uses include:

• Responsive video containers : Ensuring videos don't stretch awkwardly on mobile screens.
• Image placeholders : Keeping space reserved before images load, preventing layout shifts.
• UI cards or banners : Maintaining visual consistency in galleries or feeds.

A common trick used before aspect-ratio was using percentage-based padding inside a wrapper. Now, this single property does the job cleaner and more reliable.

Just remember:

• It doesn't work on replaced elements like <img alt="How does the aspect-ratio property work?" > if they already have their own dimensions.
• Browser support is pretty solid these days, but always good to test in older browsers if needed.

That's about it — not too complicated once you get the hang of when and how to apply it.

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