html div图片拉伸,使图像完全填充div而无需拉伸

小编典典

自动调整图像大小以适应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