上代码
//CSS
<style>
.imgWrap{
position: relative;
width: 300px;
height: 300px;
margin: 20px;
border:1px solid red;
}
.imgWrap img{
position: absolute;
}
</style>
//HTML
<body>
<div class="imgWrap">
<img src="images/01.jpg" alt="">
</div>
<div class="imgWrap">
<img src="images/02.jpg" alt="">
</div>
</body>
//JS
$(function () {
$(".imgWrap img").each(function () {
adjustImg($(this),$(this).parents(".imgWrap"));
})
});
function adjustImg($this,$box) {
//图片宽高
var imgW=$this.width();
var imgH=$this.height();
//盒子宽高
var boxW=$box.width();
var boxH=$box.height();
//求比例最小值
var min=Math.min(boxW/imgW,boxH/imgH,1);
var offsetLeft=(boxW-(min*imgW))/2;
var offsetTop=(boxH-(min*imgH))/2;
$this.css({
width:min*imgW,
height:min*imgH,
left:offsetLeft,
top:offsetTop
})
}
效果：
image.png
image.png
记于8月20日。
网友评论