使⽤CSS让矩形图⽚只展⽰中间正⽅形区域且图⽚不变形（divimg两种标签）效果⽰意
CSS实现
1. 使⽤ div 标签时，设置背景图，并设置 background-size: cover
<!-- 标签 -->
<div class="square"></div>
<!-- 样式 -->
<style>
.square{
width: 80px;
height: 80px;
background:url("背景图地址") no-repeat center center;
html图片展示特效background-size: cover;
}
</style>
2. 使⽤ img 标签时，设置 src 属性， 并设置 object-fit: cover
<!-- 标签 -->
<img class="square"src="背景图地址"></div>
<!-- 样式 -->
<style>
.square{
width: 80px;
height: 80px;
object-fit: cover;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。