在 HTML 中裁剪图像

Subodh Adhikari 2023年2月19日 2022年1月2日
  1. 在 HTML 中使用 widthheightoverflow CSS 属性裁剪图像
  2. 在 HTML 中使用 object-fit CSS 属性裁剪图像
在 HTML 中裁剪图像

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

在 HTML 中使用 widthheightoverflow CSS 属性裁剪图像

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

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

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

示例代码:

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.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%)。我们还可以提供像素位置:xpxypx,但这通常没有用。

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

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

示例代码:

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.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;
}

相关文章 - HTML Image