使用CSS可以通过裁剪（crop）或者缩放（resize）实现对图片的操作。其中，裁剪是指将图片从原始尺寸中截取一部分显示出来，缩放则是指按照比例缩放图片的大小。要实现图片裁剪，可以通过设置父元素的 overflow 属性和子元素的 width 和 height 属性来裁剪图像。
使用 CSS 实现图片裁剪的关键步骤如下：
例如，在以下代码中，我们将图片宽度设置为 200px，高度设置为 150px，并将其添加到带有 100px 宽和 100px 高的 div 元素内:
<div class="image-container">
<img src="example.jpg" alt="example image" width="200" height="150">
</div>在 CSS 中，使用如下代码实现图片裁剪：
.image-container {
width: 100px;
height: 100px;
overflow: hidden;
}
img {
width: 200px;
height: 150px;
margin-left: -50px;
margin-top: -25px;
}上述代码会将 image-container 元素设为 100px 的宽度和高度，并隐藏其超过这个大小的内容。接下来，我们将图片的大小设为需要展示的部分（200px x 150px）。最后，使用 margin-left 和 margin-top 将图片移动到裁剪的位置。
需要注意的是，裁剪时原始图片的中心点应该放在画布的中间。如果图片的宽高比与容器不匹配，则会发生拉伸问题。可以使用 JavaScript 或其他工具处理这种情况。
关键词： CSS、图片裁剪、overflow、width、height、margin-left、margin-top、宽高比。