Установите высоту контейнера после изменения размеров внутреннего элемента

Мой сайт отображает список участников.

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

На больших экранах список состоит всего из одной строки. На меньшем экране строка сворачивается в 3 столбца и, наконец, два столбца (менее 768px).

Я хочу, чтобы каждый элемент имел равную высоту, так что каждая «строка» (на небольших устройствах) содержит равное количество элементов.

Это обычная задача, для которой я пишу быструю функцию, которая вызывается на $(window).load () и on $(window).изменить размер.)(

Проблема, с которой я сталкиваюсь с этой работой, (я предполагаю) связана с тем, что — прежде чем я установлю высоту всех элементов-членов, я сначала установлю высоту элемента в каждом элементе-члене. Этот внутренний элемент-фотография, размер которой я изменяю при каждом изменении размера окна. (Я делаю это, потому что фотографии должны выглядеть как круги, поэтому мне нужно изменить высоту каждой фотографии, поскольку она меняется по ширине).

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

Это пометка для элемента (элемента):

<div class="col-xs-6 col-sm-4 col-md-3">
    <div class="member">
        <div class="image">
            <img src="path/to/file.jpg"/>
        </div>
        <div class="bottom">
            <h3>John Smith</h3>
            <p>I like to code.</p>
        </div>
    </div>
</div>

Вот функция (которая вызывается при загрузке окна и изменении размера окна):

function resizeMembers(){

    var highestMember = 0;

    $('.member').each(function(i,e){

        $(e).find('.image img').height($(e).find('.image .img').width());

        if($(e).height() > highestMember){
            highestMember = $(e).height();
        }

    });

    $('.member').each(function(i,e){

        $(e).height(highestMember);

    });
}

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

1 ответ

  1. У меня есть способ обойти проблему.

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

    Но, вот альтернатива коду в моем вопросе:

    function resizeMembers(){
        var highestMember = 0;
    
        $('.member').each(function(i,e){
    
        $(e).find('.image .img').height($(e).find('image .img').width());
    
        if($(e).find('.bottom').height() > highestMember){
            highestMember = $(e).find('.bottom').height();
        }
    
    });
    
    
    $('.home-member-x').each(function(i,e){
    
        the_height = highestMember + $(e).find('.image').width();
    
        $(e).height(the_height);
    
    });
    

    }

    Еще один подходящий ответ, для тех, кто находит эту страницу, как @darrylyeo указал — сделать все исходные изображения квадратов (и установить высоту авто для изображений).