css - 自适应缩略图/固定拇指

我无法使我的作品集缩略图以响应方式工作。我正在使用媒体查询，因此我的拇指是其容器的33.3％，取决于设备宽度（3,2或1列）的50％或100％。

我希望大拇指摆正。如何使高度等于宽度，并在这些正方形中填充图像？

实际上，div不能处于常规网格中，因为它们具有不同的高度。

到目前为止，这是我的代码。

<div class="thumbnail-container">
    <div class="th">
        <img src="img/a.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/b.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/b1.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/c.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/c1.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/d.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/b.jpg" class="pre" />
    </div>
    <div class="th">
        <img src="img/a.jpg" class="pre" />
    </div>
</div>

.thumbnail-container {
    width: 100%;
    padding: 0;
    margin: 0;
}
.th {
    width: 33.3%;
    display: inline-block;
    float: left;
}
.thumbnail-container {
    width: 100%;
    padding: 0;
    margin: 0;
}
.th {
    width: 33.3%;
    display: inline-block;
    float: left;
}

最佳答案

您可以使用JQuery进行操作，例如以下示例。

var cw = $（'。child'）。width（）;
$（'。child'）。css（{'height'：cw +'px'}）;

关于css - 自适应缩略图/固定拇指，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32239512/