css设置html的img放大居中

效果：

在自适应PC端跟移动端的情况下，轮播图的图片在移动端显示太扁太小，所以需要截取中间的主要内容对其进行放大，图片左右留白不显示。

移动端（设置前）：

 

 

 

 

移动端（设置后）：

 

 

 

 代码：

结构：

 

 

写样式 （放大比例136%）：

 

.swiper-slide {

    width: 100%;

    overflow: hidden;

}

.swiper-slide div {

        display: flex;

        justify-content: center;

        align-items: center;

    }

.swiper-slide img {

        width: 136%;

        height: 100%;

        display: block;

        margin: 0 auto;

    }

 

 

就好了，有效果！