Отрегулируйте высоту изображения в соответствии с высотой содержимого

Question

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

function setImageHeight() { 
    $('.single-tile').each(function(){ 
    var tile_height = $(this).height(); 
    $(this).find('.image').height(tile_height); 
    } 
); 
} 
$(document).ready(function() { 
    setImageHeight(); 
}); 
$(window).resize(function() { 
    setImageHeight(); 
}); 

Answer 1

Для чувствительной высоты задайте свойство css как высоту: 100% и для чувствительной ширины заданного поля: авто. Итак, ниже класс css сделает трюк для вас.

.responsive-image { 
height:100%; 
margin:auto; 
}