Отзывчивый thumbnail/fixed thumbs

Question

У меня возникли проблемы с изменением моей работы с портретами. Я работаю с медиа-запросами, поэтому мои большие пальцы составляют 33,3% их контейнеров, 50% или 100% в зависимости от ширины устройства (3,2 или 1 столбца).

Я хочу, чтобы большие пальцы были квадратными. Как я могу сделать высоту равной ширине, а изображения заполняются этими квадратами?

Как бы то ни было, divs не могут быть в правильной сетке, так как они имеют разную высоту.

Вот мой код.

<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

Я считаю, что ответ является добавлением .resize следующим образом:

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

Это похоже на работу!

Спасибо, Коди.

Answer 2

Вы можете сделать это с помощью JQuery, например, как на примере ниже.

var cw = $ ('. Child'). Width(); $ ('. Child'). Css ({'height': cw + 'px'});