在 HTML 中裁剪图像
在本文中,我们将介绍在 HTML 中裁剪图像的方法。
在 HTML 中使用 width
、height
和 overflow
CSS 属性裁剪图像
除了 width
和 height
,CSS 容器还有一个 overflow
属性,可用于图像裁剪。要激活溢出属性,我们应该将图像包含在具有特定宽度和高度的 div
内,并将 overflow
设置为 hidden
。它将确保基础容器将保留其结构,并且任何图像溢出都将隐藏在容器后面。最后,我们可以使用 margin 属性来调整裁剪区域。此属性有四个值。但是,只有四个值中的第一个和最后一个是必不可少的,因为它们分别表示从顶部和左侧开始的像素。
例如,在两个不同的容器中插入带有 URL https://tinyurl.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://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%)。我们还可以提供像素位置:xpx
和 ypx
,但这通常没有用。
例如,插入图片三遍。第一张为原图,两张为裁剪后的图片。将类别 cropped1
和 cropped2
分配给第二张和第三张图片。为这些图片设置特定的宽度、高度和边框。使用 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;
}