时间戳

首页 > 解决方案 > 使用 CSS 将宽度设置为 100% 时，是否可以将高度设置为宽度的百分比

css - 使用 CSS 将宽度设置为 100% 时，是否可以将高度设置为宽度的百分比

问题描述

我编写了一个名为sharp-watch的图像优化助手，它为图像生成元数据，包括它们的纵横比和blurhash。

我希望图像负责默认情况下适用于img标签（当宽度设置为 时100%，使用图像纵横比设置高度）。

问题是只有下载图像后才能知道纵横比。鉴于我提前知道纵横比（使用sharp-watch元数据），是否可以100%使用 CSS（不是 JavaScript）的元数据中的纵横比设置宽度和高度？

我需要设置高度以在图像加载时显示模糊哈希。

标签： css

解决方案

您可以通过如下所示的纵横比来做到这一点

.container {
   background-color: red;
   position: relative;
   width: 100px;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
<div class="container"> 
</div>
尝试改变 padding-top 你会得到不同的结果

有关更多详细信息，请检查此

推荐阅读