在有CSS 3.0之前裁剪图片实现也是颇有难度的，现在我们有了两个非常方便简单的属性可以实现裁剪，那就是object-fit和object-position，这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比，利用它我们可以实现一个如下的特效。
以下是代码实现，欢迎大家复制粘贴和收藏。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0中裁剪图像的特效</title>
<style>
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #000;
margin-top:50px;
}
input {
transform: scale(1.5);
margin: 10px 5px;
color: #fff;
}
input:checked br img {
width: 480px;
height: 270px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 4s;
}
img {
width: 960px;
height: 540px;
transition: 0s;
}
</style>
</head>
<body>
<main>
勾选裁剪图片 <input type="checkbox" />
<br />
<img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</main>
</body>
</html>
