思路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;

设置好宽和高,图片自己就会进行裁剪和居中。

支持性问题

参考