What is aspect ratio? How to implement aspect ratio in CSS?

It is very important to have a consistent ratio between the width and height of images and responsive elements. The following article will take you to understand the aspect ratio, aspect-ratio attribute, and introduce in detail the method of implementing aspect ratio in CSS through examples. .

What is aspect ratio

According to Wikipedia:

In mathematics, ratio means How many times a number contains another number. For example, if there are eight oranges and six lemons in a bowl of fruit, then the ratio of oranges to lemons is eight to six (i.e. 8:6, equivalent to a ratio of 4:3).

In web design, the concept of aspect ratio is used to describe that the width and height of an image should be adjusted proportionally.

Consider the diagram below

The ratio is 4:3, which indicates that the ratio of apples to grapes is4:3.

In other words, the smallest box we can get for an aspect ratio of 4:3 is a 4px * 3px box. When this box height is scaled proportionally to its width, we will have a box of wide dimensions.

Consider the image below.

#The box is proportionally sized so that the ratio between its width and height is consistent. Now, let's imagine that this box contains an important picture and we care about all its details.

Please note that image details are preserved regardless of size. By having a consistent aspect ratio, we gain the following benefits

• Images throughout the website will remain consistent across different viewport sizes.
• We can also have responsive video elements.
• It helps designers create a clear guideline for image sizes so developers can work with them during development.

Calculate aspect ratio

To measure the aspect ratio, we need to divide the width by the height as shown in the image below.

The ratio between width and height is 1.33. This means that this ratio should be adhered to. Please consider

Note that in the picture on the right, the value of width ÷ height is 1.02, which is not the original aspect ratio (1.33 or 4:3) .

You may be thinking, how to get the value of 4:3? Well, this is called the closest normal aspect ratio and there are some tools that can help us find it. When doing UI design, it is highly recommended that you know exactly what the aspect ratio of the images you are using is. Using this URL can help us calculate quickly.

Website address: http://lawlesscreation.github.io/nearest-aspect-ratio/

Achieve aspect ratio in CSS

We used to achieve aspect ratio by using percentagespadding in CSS. The good news is that recently we got native support for aspect-ratio in all major browsers. Before we dive into the native way, let’s first explain the good old way.

When an element has a vertical percentage of padding, it will be based on its parent's width. Please see the picture below.

When a title has padding-top: 50%, the value is calculated based on the width of its parent element. Because the width of the parent element is 200px, padding-top will become 100px.

To find out what percentage value to use, we need to divide the height of the image by its width. The resulting number is the percentage we want to use.

Assume the image width is 260px and the height is 195px. The result of

Percentage padding = height / width

195/260 is 0.75 (or 75%).

We assume we have a grid of cards, and each card has a thumbnail. The width and height of these thumbnails should be equal.

For some reason, the operation uploaded a picture that was inconsistent in size with other pictures. Notice that the height of the middle card is different from the height of the other cards.

You may be thinking, this is not easy to solve? We can add object-fit: cover to the image. Problem solved, right? It's not that simple. This solution won't look good across multiple viewport sizes.

注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。

我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比padding来实现一个宽高比。

HTML

<article class="card">
  <div class="card__thumb">
    <img src="/static/imghwm/default1.png"  data-src="thumb.jpg"  class="lazy"   alt="" />
  </div>
  <div class="card__content">
    <h3 id="Muffins-nbsp-Recipe">Muffins Recipe</h3>
    <p>Servings: 3</p>
  </div>
</article>

CSS

.card__thumb {
  position: relative;
  padding-top: 75%;
}

.card__thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

通过上述，我们定义了卡片缩略图包装器（.card__thumb）的高度取决于其宽度。另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有object-fit: cover，用于上传不同大小的图片的情况。请看下面的动图。

请注意，卡片大小的变化和缩略图的长宽比没有受到影响。

aspect-ratio 属性

今年早些时候，Chrome、Safari TP和Firefox Nightly都支持aspect-ratio CSS 属性。最近，它在Safari 15的官方版本中得到支持。

我们回到前面的例子，我们可以这样改写它。

/* 上面的方式 */
.card__thumb {
  position: relative;
  padding-top: 75%;
}

/* 使用 aspect-ratio 属性 */
.card__thumb {
  position: relative;
  aspect-ratio: 4/3;
}

请看下面的动图，了解宽高比是如何变化的。

Demo 地址：https://codepen.io/shadeed/pen/ZEeMjZe

有了这个，让我们探索原始纵横比可以有用的一些用例，以及如何以逐步增强的方法使用它。

渐进增强

我们可以通过使用CSS @supports和CSS变量来使用CSS aspect-ratio。

.card {
  --aspect-ratio: 16/9;
  padding-top: calc((1 / (var(--aspect-ratio))) * 100%);
}

@supports (aspect-ratio: 1) {
  .card {
    aspect-ratio: var(--aspect-ratio);
    padding-top: initial;
  }
}

Logo Images

来看看下面的 logo

你是否注意到它们的尺寸是一致的，而且它们是对齐的？来看看幕后的情况。

// html
<li class="brands__item">
  <a href="#">
    <img src="/static/imghwm/default1.png"  data-src="assets/batch-2/aanaab.png"  class="lazy"   alt="" />
  </a>
</li>

.brands__item a {
  padding: 1rem;
}

.brands__item img {
  width: 130px;
  object-fit: contain;
  aspect-ratio: 2/1;
}

我添加了一个130px的基本宽度，以便有一个最小的尺寸，而aspect-ratio会照顾到高度。

蓝色区域是图像的大小，object-fit: contain是重要的，避免扭曲图像。

Responsive Circles

你是否曾经需要创建一个应该是响应式的圆形元素？CSS aspect-ratio是这种使用情况的最佳选择。

.person {
  width: 180px;
  aspect-ratio: 1;
}

如果宽高比的两个值相同，我们可以写成aspect-ratio: 1而不是aspect-ratio: 1/1。如果你使用flexbox或grid ，宽度将是可选的，它可以被添加作为一个最小值。

原文地址：https://ishadeed.com/article/css-aspect-ratio/

作者：Ahmad Shadeed

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of What is aspect ratio? How to implement aspect ratio in CSS?. For more information, please follow other related articles on the PHP Chinese website!