Muffins Recipe
Servings: 3
Home>Article>Web Front-end> 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. .
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 a4px * 3pxbox. 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
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 is1.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/
We used to achieve aspect ratio by using percentagespaddingin CSS. The good news is that recently we got native support foraspect-ratioin 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 ofpadding, it will be based on its parent's width. Please see the picture below.
When a title haspadding-top: 50%, the value is calculated based on the width of its parent element. Because the width of the parent element is200px,padding-topwill become100px.
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 is260pxand the height is195px. The result of
Percentage padding = height / width
195/260is0.75(or75%).
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 addobject-fit: coverto the image. Problem solved, right? It's not that simple. This solution won't look good across multiple viewport sizes.
注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。
我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比padding来实现一个宽高比。
HTML
Muffins Recipe
Servings: 3
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，用于上传不同大小的图片的情况。请看下面的动图。
请注意，卡片大小的变化和缩略图的长宽比没有受到影响。
今年早些时候，Chrome、Safari TP和Firefox Nightly都支持aspect-ratioCSS 属性。最近，它在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变量来使用CSSaspect-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
你是否注意到它们的尺寸是一致的，而且它们是对齐的？来看看幕后的情况。
// html
.brands__item a { padding: 1rem; } .brands__item img { width: 130px; object-fit: contain; aspect-ratio: 2/1; }
我添加了一个130px的基本宽度，以便有一个最小的尺寸，而aspect-ratio会照顾到高度。
蓝色区域是图像的大小，object-fit: contain是重要的，避免扭曲图像。
你是否曾经需要创建一个应该是响应式的圆形元素？CSSaspect-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!