Html CSS设置与宽度相关的高度

我正在用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>

我在stackoverflow上看到一些帖子有类似的问题，答案是使用

padding bottom

根据宽度设置高度。然而，由于我给了专辑卡周围的边框，

#专辑卡

，

#专辑卡

的高度比预期的要长

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

以转换图像：

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

var images=document.querySelectorAll（'.image_缩略图'）；
对于（var i=0；i

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

借助css3中的帮助

calc（）

，您可以计算宽度

---

这是，这可能对您有帮助。

是否应该是副本？我知道凭经验这应该行得通，但还是不行。。不知道为什么要将高度设置为高度的9/16@GreenRoof@GreenRoof，您可以在jquery中使用

calc

和

css（）

，我想这会解决您的问题。。。。！

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

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