在网页设计中，图片的裁剪和缩放是非常常见的需求。下面介绍一些常用的 CSS 属性来实现这些效果。
当图片的尺寸大于容器的尺寸时，我们可以使用 CSS 控制图片的裁剪。常用的属性有：
overflow: hidden;：隐藏容器外的内容object-fit: cover;：将图片等比例缩放，直到完全覆盖容器，并裁剪超出容器范围的部分
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
当图片尺寸小于容器尺寸时，我们可以使用 CSS 控制图片的缩放。常用的属性有：
object-fit: contain;：将图片等比例缩放，直到完全包含在容器中object-position: center;：将图片居中显示
.container {
width: 300px;
height: 200px;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
上述代码将图片缩放到完全包含在容器中，并且居中显示。