思路1. 使用overflow裁剪
大致的思想就是对图片固定高或宽,然后另一个选项为auto. 记得单独设置
max-width: none;
保证图片不会被裁剪/变形. 如果需要让图片居中,就设置
margin-left: -50%
可以让图像向右移动50%即一半啦
完整实例
height:350px;
overflow: hidden;
max-width: none;
margin-left: -50%;
存在的问题
在slider里,在图片滚动的时候会显示出溢出的部分
思路2. 使用 CSS3 特性 object-fit
这个特性碉堡了。 和上面的实例具有相同效果的:
height:350px;
object-fit: cover;
设置好宽和高,图片自己就会进行裁剪和居中。