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中的帮助Excel.Range cell; cell.AddComment("Insert Here");，您可以计算宽度。

calc()

这是Referance calc()，这可能对您有所帮助。

CSS设置高度与宽度

2 个答案: