html代码
<div class="box">
<img src="1.jpg">
</div>
css代码
.box{
position: relative;
width: inherit; /*与父元素宽度相等*/
}
.box img{
width: 100%;
height: 100%;
position:absolute;
object-fit: cover;
/*下面可以删掉*/
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
position: relative;
width: inherit; /*与父元素宽度相等*/
}
.box img{
width: 100%;
height: 100%;
position:absolute;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg">
</div>
</body>
</html>
随屏幕大小自适应,图片比例不变,不变形,图片中心位置居中显示,