我们过去是通过在CSS中使用百分比padding
来实现宽高比的。好消息是,最近,我们在所有主要的浏览器中都得到了aspect-ratio
的原生支持。在深入了解原生方式之前,我们先首先解释一下好的老方法。
当一个元素有一个垂直百分比的padding
时,它将基于它的父级宽度。请看下图。
当标题有padding-top: 50%
时,该值是根据其父元素的宽度来计算的。因为父元素的宽度是200px
,所以padding-top
会变成100px
。
为了找出要使用的百分比值,我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。
假设图像宽度为260px
,高度为195px
。
Percentage padding = height / width
195/260
的结果为 0.75
(或75%
)。
我们假设有一个卡片的网格,每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。
由于某些原因,运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。
你可能会想,这还不容易解决?我们可以给图片加个object-fit: cover
。问题解决了,对吗?不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。
注意到在中等尺寸下,固定高度的图片从左边和右边被裁剪得太厉害,而在手机上,它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度,但这不是一个实用的解决方案。
我们需要的是,无论视口大