小编典典
自动调整图像大小以适应Div-使CSS正常工作
这是一种方法,从以下HTML开始:
Portrait Style
和CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
当您将图像定向为人像时,需要将宽度缩放到100%。相反,当图像为横向时,您需要缩放高度。
不幸的是,CSS中没有针对图像长宽比的选择器组合,因此您不能使用CSS来选择正确的缩放比例。
另外,由于图像的左上角固定在包含块的左上角,因此您没有简单的方法来使图像居中。
jQuery助手
您可以使用以下jQuery操作来根据图像的纵横比确定要设置的类。
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
对于中的每个图像.container,获取其高度和宽度,进行测试width
另外,我添加了一个检查,以考虑到包含块的长宽比。以前,我隐式地假定了正方形视图面板。
2020-05-16