Question

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

我希望拇指是方形的。如何使高度等于宽度，图像填充这些方块？

实际上，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;
}

Answer 1

您可以使用JQuery，例如下面的示例。

var cw = $（'。child'）。width（）; $（ '子 '）的CSS（{' 高度 '：CW +' 像素'}）;

Answer 2

我认为答案是添加.resize如下：

<script type='text/javascript'>
    $(window).resize(function(){
    var cw = $('.wrapre').width();
        $('.wrapre').css({'height':cw+'px'});
    });
</script>

似乎有效！

谢谢科迪。

响应式缩略图/固定拇指

2 个答案: