本文介绍了一种使用CSS实现图片在div容器中居中显示并设置背景的方法。通过定义特定的div类（.imgCenterBox），利用CSS属性如display、border、width、height、background-position、background-size及background-image等，实现了一个宽高均为200px且背景为指定图片的样式。该样式还支持自适应缩放，使背景图片能够完全填充div。
html：
<div class="imgCenterBox"></div>
css:
.imgCenterBox {
display: block;border: 1px solid #b72f20;
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
background-image: url(image/0126-1.png);
}
当图片不符合目标区域的尺寸时做等比例缩放，截取核心区域
最新推荐文章于 2024-04-25 00:30:00 发布
border: 1px solid #b72f20;
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
background-image: url(image/0126-1.png);
}
扫一扫
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
