根据内容高度调整图像高度
问题描述:
我已经编码了下面的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();
});
答
对于响应高度将css属性设置为高度:100%,对于响应宽度设置margin:auto。所以下面的CSS类将为你做的伎俩。
.responsive-image {
height:100%;
margin:auto;
}
对不起,那不是要为我工作,因为我的目标是避免任何形式的内容专区内空/白色空间,以及图像DIV中...希望你让我point..i实现了我正在寻找的东西,只是屏幕调整大小问题没有解决......无论如何谢谢你的回复尽管.. –