CSS设置高度与宽度相关

Question

我正在使用 HTML 和 CSS 制作专辑页面，我想将图像的高度设置为宽度的 9/16。

HTML 代码

<div class = "col-md-12" id = "album-list">
    <div class = "col-md-4">
        <div id = "album-card" style = "border: 1px solid grey;">
            <img class = "image_thumbnail" src = "images/sampleImage.jpg" alt = "Thumbnail" />
            <div style = "padding-top: 10px; padding-bottom: 5px;">
                <p class = "card-text"><strong>TITLE HERE</strong></p>
            </div>
        </div>
    </div>
    <!-- More Columns -->
</div>

CSS 样式

.image_thumbnail {
    width: 100%;
}

我在stackoverflow上看到一些帖子有类似的问题，答案是使用padding-bottom根据宽度设置高度。但是，由于我在#album-card 周围设置了边框，所以#album-card 的高度比预期的要长。

如何设置宽度的高度 9/16？？

Answer 1

要转换图像：

var images = document.querySelectorAll('.image_thumbnail');
for (var i = 0; i < images.length; i++) {
    images[i].height = images[i].width * 0.5625;
}

这将选择页面上具有相应类的所有图像，并将相对于它们的宽度直接转换高度（如：16 / 9 = 0.5625）。

Answer 2

借助 css3 中的 calc()，您可以计算宽度。

.image_thumbnail {
    width: calc((100%*9)/16);
}

我是Referance calc()，这可能对你有帮助。