使用 CSS 1:1 裁剪图像 - CSS

当我们需要在网页中展示图片时，有时候我们需要将图片以一定的比例进行裁剪，以适应不同的浏览器窗口大小或者展示效果。在 CSS 中，我们可以使用 object-fit 属性配合 object-position 属性实现对图片的 1:1 裁剪。

object-fit 属性

object-fit 属性定义图片在容器中的适应方式，常见取值有：

• fill：缩放图片尺寸，填满容器，图片可能会被拉伸或挤压变形
• contain：按比例缩放图片尺寸，使其完全适应容器，容器内留有空白区域
• cover：按比例缩放图片尺寸，使其完全覆盖容器，超出容器的部分被裁剪
• none：不缩放图片尺寸，显示原始大小，但可能会被拉伸挤压变形
• scale-down：按比例缩放图片尺寸，比 contain 更优先，但不会放大图片

object-position 属性

object-position 属性定义图片在容器中的位置，其取值方式与 CSS 中的 background-position 属性一致，例如 50% 50% 表示图片在容器中水平和垂直方向上居中对齐。默认情况下，图片的对齐方式是左上角。

1:1 裁剪图像的实现

要实现 1:1 裁剪，只需要让宽高比例相等，然后再将 object-fit 属性设置为 cover 或者 contain 都可以。例如，下面的 CSS 代码实现了一个宽高均为 300px 的容器里展示一个 800x800 的图片并进行 1:1 裁剪：

.container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

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

需要注意的是，如果图片本身的宽高比例和容器的宽高比例不一致，那么使用 cover 属性时会对图片进行裁剪，使用 contain 属性时则会添加一些留白。此时，可以根据具体情况去选择使用哪种适应方式。

以上就是使用 CSS 1:1 裁剪图像的介绍，希望对您有所帮助。