css图片裁剪不变形 |css动画文字滚动

一、使用 background-size 属性。

background-image: url("图片路径");
background-size: cover;
background-position: center center;

使用此方法会让图片自动充满容器，以及图片的位置可以通过设置 background-position 来设置。

二、使用 clip-path 属性。

img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

使用此方法需要设定好 polygon 的坐标值，从而实现不变形的图片裁剪。

三、使用 object-fit 属性。

img {
width: 100%;
height: 100%;
object-fit: cover;
}

使用此方法实现图片的缩放和裁剪，从而达到不变形的效果。

总之，以上三种方法可以帮助大家在 css 中实现图片的裁剪不变形，根据需要选择合适的方法就可以了。