新的宽⾼⽐（aspect-ratio）CSS属性
在响应式⽹页设计中，保持⼀致的宽⾼⽐，即所谓的长宽⽐，对于防⽌布局的累积偏移⾄关重要。现在，有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽⾼⽐属性，有了更直接的⽅法来实现这⼀⽬标。
长宽⽐
长宽⽐最常见的表⽰⽅式是两个整数和⼀个冒号，尺⼨为：宽：⾼，或x：y。摄影最常见的长宽⽐是4:3和3:2，⽽视频和最近的消费类相机则倾向于16:9的长宽⽐。
随着响应式设计的到来，对于Web开发⼈员⽽⾔，保持宽⾼⽐已变得越来越重要，尤其是当图像尺⼨不同且元素⼤⼩根据可⽤空间⽽变化时。
保持宽⾼⽐变得重要的⼀些⽰例是：
创建⾃适应iframe，它们是⽗级宽度的100％，⾼度应保持特定的视⼝⽐例
为图像，视频和嵌⼊创建内在的占位符容器，以防⽌在项⽬加载并占⽤空间时重新布局
为交互式数据可视化或SVG动画创建统⼀的、响应式空间
为多元素组件（如卡⽚或⽇历⽇期）创建统⼀、响应的空间
为不同尺⼨的多个图像创建统⼀的响应空间（可与 object-fit 配合使⽤）
Object-fit
定义宽⾼⽐有助于我们在响应式上下⽂中确定媒体的⼤⼩。这个桶中的另⼀个⼯具是对象拟合属性，它使⽤户能够描述⼀个块中的对象（如图像）应该如何填充该块。此存储桶中的另⼀个⼯具是 object-fit 属性，该属性使⽤户能够描述块中的对象（例如图像）应如何填充该块：
initial 和 fill 会重新调整图像以填充空间。在我们的⽰例中，由于重新调整像素，这会导致图像被压扁和模糊。object-fit:cover 使⽤图像的最⼩尺⼨填充空间，并根据此尺⼨裁剪图像以适合该尺⼨。object-fit: contain 确保整个图像始终可见，因此与 cover 相反，它采⽤最⼤边界的⼤⼩（在我们上⾯的例⼦中是宽度），并调整图像的⼤⼩，以保持其固有的纵横⽐，同时适应空间。object-fit: none 的情况下，图像会以其⾃然⼤⼩在中⼼位置（默认对象位置）被裁剪。
object-fit:cover 在⼤多数情况下，封⾯往往可以确保在处理不同尺⼨的图像时有⼀个很好的统⼀界⾯，但是，这样⼀来，你就会失去信息（图像在其最长的边缘被裁剪）。
如果这些细节很重要（例如，在处理美容产品的平铺时），裁剪重要内容是不可接受的。所以最理想的情况是采⽤⼤⼩不⼀的响应式图⽚，适合UI空间，不需要裁剪。
旧的技巧：使⽤padding-top保持宽⾼⽐
为了使这些更灵敏，我们可以使⽤宽⾼⽐。这允许我们设置⼀个特定的⽐例⼤⼩，并将媒体的其他部分基于⼀个单独的轴（⾼度或宽度）。
⽬前，⼀种基于图像宽度来保持宽⾼⽐的跨浏览器解决⽅案被⼈们⼴泛接受，被称为“Padding-Top Hack”。该解决⽅案需要⼀个⽗容器和⼀个绝对放置的⼦容器。然后，可以将宽⾼⽐计算为百分⽐以设置为 padding-top。例如：
1:1长宽⽐ = 1/1 = 1 = padding-top: 100%
4:3的长宽⽐ = 3/4 = 0.75 = padding-top: 75%
3:2的长宽⽐ = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9的长宽⽐ = 9 / 16 = 0.5625 = padding-top: 56.25%
现在，我们已经确定了宽⾼⽐值，可以将其应⽤于⽗容器。考虑以下⽰例：
<div class="container">
<img class="media"src="..."alt="...">
</div>
然后我们可以编写以下CSS：
.container{
position: relative;
width: 100%;
padding-top: 56.25%;/* 16:9 宽⾼⽐ */
}
.media{
position: absolute;
top: 0;
}
⽤宽⾼⽐来维持宽⾼⽐
不幸的是，计算这些 padding-top 值不是很直观，并且需要⼀些额外的开销和定位。有了新的内在 aspect-ratio CSS属性，维护纵横⽐的语⾔就更加清晰了。
css最新同样的标记，我们可以⽤ aspect-ratio: 16 / 9 代替：padding-top: 56.25%，将 aspect-ratio 设置为指定的 width / height⽐例。
使⽤padding-top
.container{
width: 100%;
padding-top: 56.25%;
}
使⽤aspect-ratio
.container{
width: 100%;
aspect-ratio: 16 / 9;
}
使⽤ aspect-ratio ⽽不是 padding-top 更加清晰，⽽且不会对 padding 属性进⾏⼤修，做⼀些超出其通常范围的事情。
此新属性还增加了将长宽⽐设置为 auto 的功能，其中“具有固有长宽⽐的已替换元素将使⽤该长宽⽐；否则，该框没有⾸选的长宽⽐”。如果同时指定 auto 和 <ratio>，则⾸选的长宽⽐是指定的 width 除以 height 的⽐例，除⾮它是⼀个具有固有长宽⽐的替换元素，在这种情况下，将使⽤该长宽⽐。
⽰例：Grid中的⼀致性
这对于CSS布局机制（例如CSS Grid和Flexbox）也⾮常有效。考虑⼀个列表，其中包含您要保持1:1纵横⽐的⼦级，例如赞助商图标⽹格：
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..."alt="..."/>
</li>
<li class="sponsor">
<img src="..."alt="..."/>
</li>
</ul>
.sponsor-grid{
display: grid;
grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img{
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
⽰例：防⽌布局偏移
⾼宽⽐的另⼀⼤特点是，它可以创建占位符空间，以防⽌累积布局偏移，提供更好的Web Vitals。在第⼀个⽰例中，当媒体加载完成时，从诸如Unsplash之类的API加载资产会创建布局偏移。
另⼀⽅⾯，使⽤ aspect-ratio 创建占位符以防⽌此布局偏移：
img{
width: 100%;
aspect-ratio: 8 / 6;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。