图片居中-高度固定-左右两边裁剪

<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%);
}