根据内容高度调整图像高度

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％，对于响应宽度设置margin：auto。所以下面的CSS类将为你做的伎俩。

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