图片居中-高度固定-左右两边裁剪
2020-12-23 本文已影响0人
_皓月__
<div class="box">
<img class="banner" src="xxx.jpg" alt="">
</div>
.box{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.banner{
height:100%;
position: absolute;
// left 以及 margin-left 的 50% 均以其父级元素的宽为基准，而 transform: translateX(-50%); 它的 50% 是以自身宽度为基准
left: 50%;
// margin-left: -50%;
transform: translateX(-50%);
}
