迹忆客 专注技术分享

在本文中，我们将介绍在 HTML 中裁剪图像的方法。

在 HTML 中使用 width、height 和 overflow CSS 属性裁剪图像

除了 width 和 height，CSS 容器还有一个 overflow 属性，可用于图像裁剪。要激活溢出属性，我们应该将图像包含在具有特定宽度和高度的 div 内，并将 overflow 设置为 hidden。它将确保基础容器将保留其结构，并且任何图像溢出都将隐藏在容器后面。最后，我们可以使用 margin 属性来调整裁剪区域。此属性有四个值。但是，只有四个值中的第一个和最后一个是必不可少的，因为它们分别表示从顶部和左侧开始的像素。

例如，在两个不同的容器中插入带有 URL https://test.com/k764en3w 的图像。给第二张图像一个 cropped 类，以便我们可以对其应用一些样式并裁剪图像。在 CSS 中，选择 cropped 类并将 height 和 width 设置为 150px。将 overflow 属性设置为 hidden。接下来，创建一个边框。现在，选择 cropped 类的 img 标签并将其边距设置为 margin: -10px 0px 0px -180px。

通过这种方式，我们可以使用 CSS 在 HTML 中裁剪图像。

示例代码：

<h3> Original image: </h3>
<img
    src="https://test.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://test.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

在 HTML 中使用 object-fit CSS 属性裁剪图像

object-fit CSS 属性有助于裁剪图像。它可以有五个值，但值 cover 最适合裁剪图像。将 object-fit 设置为 cover 将保留图像的纵横比，同时仍然适合其内容框的大小。我们还可以将 object-fit 属性与 object-position 结合使用来调整要裁剪的图像区域。object-position 属性需要两个值：x% 和 y% 来定位图像（默认位置是 50% 50%）。我们还可以提供像素位置：xpx 和 ypx，但这通常没有用。

例如，插入图片三遍。第一张为原图，两张为裁剪后的图片。将类别 cropped1 和 cropped2 分配给第二张和第三张图片。为这些图片设置特定的宽度、高度和边框。使用 object-fit 属性并将其设置为 cover 在两张图片上。在第三张图片中，将 object-position 属性设置为 20% 10%。

通过这种方式，我们可以使用 CSS 在 HTML 中裁剪图像。

示例代码：

<div>
    <h3> Original image: </h3>
    <img src="https://test.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://test.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://test.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}