使用CSS实现响应式图片不变形裁剪

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

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

支持性问题

参考