20.宽高比 & 多行文本截断

宽高比

创建一个具有指定宽高比的响应式容器。

• 使用 CSS 自定义属性 --aspect-ratio 来定义所需的宽高比。

• 将容器元素设置为 position: relative 和 height: 0,使用 calc() 函数和 --aspect-ratio 自定义属性计算其高度。

• 将容器元素的直接子元素设置为 position: absolute 并填充其父元素,同时给它 object-fit: cover 以保持宽高比。

<div class="container">
 <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
 --aspect-ratio: 16/9;
 position: relative;
 height: 0;
 padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.container > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

这个技巧利用了一些巧妙的 CSS 技术来创建一个具有特定宽高比的响应式容器: