css 裁剪

作者：灭世杀发布日期:2026-06-08 浏览:91

/* 使用 CSS 裁剪图像的示例 */

img {
  /* 设置裁剪区域的大小 */
  width: 200px;
  height: 200px;

  /* 使用 object-fit 属性来裁剪图像 */
  object-fit: cover;

  /* 可选：设置边框以更好地查看裁剪效果 */
  border: 5px solid #ccc;
}

/* 如果需要更复杂的裁剪，可以使用 clip-path 属性 */
img.custom-clip {
  /* 定义一个圆形裁剪路径 */
  clip-path: circle(50% at 50% 50%);
}

解释说明：

object-fit: cover;：这个属性会确保图像保持其宽高比，并且填满整个容器。如果图像的尺寸与容器不匹配，超出部分会被裁剪掉。
clip-path: 这个属性允许你定义更复杂的裁剪路径，比如圆形、多边形等。在上面的例子中，我们使用了 circle() 函数来创建一个圆形裁剪效果。

如果你只需要简单的矩形裁剪，object-fit 就足够了；如果你需要更复杂的形状，可以考虑使用 clip-path。

上一篇：css过渡

下一篇：css 在线压缩