深入了解在CSS中裁剪图片的方法

尼耳多
4,020 阅读10分钟

简介

假设你正在做一个项目，需要裁剪一张图片来显示，但你意识到你没有办法使用你最喜欢的图片编辑器。不要担心。CSS为你提供了一套属性，使你可以在浏览器中裁剪图片。

本文通过八个不同的例子来解释如何使用这些属性。最后，一幅经过裁剪的图像将显示在你的浏览器中，而你将掌握以下八种用CSS裁剪图像的技巧。

现代图像标记

在我们开始切分图片之前，让我们回顾一下推荐的、现代的图片的HTML标记。

在HTML中，图像被认为是由<img> 标签定义的替换元素。像大多数HTML标签一样，<img> 标签接受属性。这些属性决定了图像的呈现方式。其中两个属性是width 和height ，它们定义了图像的宽度和高度。

在现代网络开发之前，你不需要在HTML中指定图像的宽度和高度--相反，你在CSS中这样做。随着时间的推移，事情发生了变化。浏览器不断发展，当然，建议也发生了变化。现在，这些建议是。

  1. 通过HTML中的width 和height 属性指定图像的宽度和高度<img> 标签。
  2. 通过loading 属性懒散地加载你的图像，其值为lazy

这两个建议在下一个代码块中都有描述，随后解释了为什么必须这样做。

<img
    src="your-image-location"
    alt="The image alternate text"
    width="The image width"
    height="The image height"
    loading="lazy"
/>

当你在HTML中指定宽度和高度时，在网页渲染过程中，浏览器会在图片下载前为其保留一个空间。

这在下一张GIF中很明显。很明显，图片还没有下载，但浏览器已经在页面上保留了它的空间。

The space for the image is reserved before the image loads when specifying the width and height in the HTML

如果你的CSS文件中含有进一步修改图片宽度和高度的代码，浏览器会进行这些修改，而不会引起页面布局的变化。

另一方面，如果你没有在HTML中指定宽度和高度，浏览器在网页渲染时就不会为图像保留空间。因此，当图像下载时，浏览器将不得不计算它的尺寸，然后才显示在指定的位置。最终，由于你的文档层次结构，这导致了布局的转移，页面上的其他元素会突然移动。

这在下一张GIF中很明显。观察一下，当图片下载时，图片下面的文字被突然推倒。

The text snaps down when the width and height are not specified in the HTML

这被认为是不利于用户体验的。

在你开始切片和切菜之前，还有一件事你需要做，那就是：去掉图片下面的空间。

问题是：什么空间？

让我们来了解一下。

移除图像下方的空间

在HTML中，图像默认是内联的，这可能导致一些奇怪的现象。当你把一个图像放在另一个容器里时，你会注意到图像下面有一个空间。

这在下一张图片中显示。该图像被放置在一个段落中，在浏览器的DevTools中被强调。图像的底部与段落中的文本对齐，除非字母有额外的字形，如q、y、p或g。

Removing the space beneath an image

填充和空白都不能消除这个空间。

解决方法是将图像的display 属性值改为block --或除inline 以外的任何其他值--然后空间就会被处理掉。

img {
   display: block; /* This gets rid of the space beneath an image */
   width: 100%;
   height: auto;
}

在本文的所有后续例子中都使用了前面的代码块。

现在，让我们开始进行一些切片和切分。

图像裁剪技术

使用object-fit ，裁剪一个图像。object-position

在这个技术中使用的属性名称准确地说明了它们的作用。object-fit ，允许你将一个对象（如图像）装入一个给定的容器中。它接受以下值。

  • contain
  • cover
  • fill
  • inherit
  • initial
  • none
  • revert
  • scale-down
  • unset

另一方面，object-position 允许你在该容器内移动该对象，方法是指定其沿水平和垂直平面的位置，或者更好的是X轴和Y轴。

这使你可以决定在屏幕上显示的图像部分，有效地裁剪图像。

Crop using object-fit and object-position

裁剪图像的基本代码在下一个代码块中描述。

.cropped-image {
   width: 100%;
   object-fit: cover;
   object-position: 200px 211px;
}

请查看下面的CodePen，了解完整的代码。

参见CodePen上Habdul Hazeez(@ziizium)
的Pen
using-object-fit-object-fit-with-object-position。

优点

  • 你只需要两行代码来裁剪图片

缺点

  • 根据你通过object-position ，裁剪后的图片可能会在较小的视口中消失。你可以使用媒体查询来调整object-position 的值以避免这种情况。

用calc() 和 裁剪长宽比。padding-top

你可以将图像裁剪成你想要的长宽比，但这需要一点额外的努力。

首先，你需要所谓的完美方形黑客。这个黑客允许你通过把它放在一个具有以下特征的图像容器中来创建一个方形图像。

  • 它的height 被设置为0
  • padding-top 的值与容器的宽度相同
  • position 属性值被设置为relative

之后，你对图像做以下工作。

  • 将图像width 和height 设置为100%
  • 将图像position 的属性值设置为absolute ，top 的值为0

现在，使用calc() 函数指定你所需要的长宽比作为图像容器的padding-top 值。

.aspect-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% * (100 / 300));
}
​
.cropped-image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

你可以在下面链接的CodePen中找到完整的实现。

参见CodePen上Habdul Hazeez(@ziizium) 的Pen
使用calc()和padding-top进行长宽比裁剪
。

优点

  • 与object-fit 相比，你会发现这个方法可以创建一个响应式的图像。

缺点

  • 需要更多的代码来实现这一点，相比之下，使用object-fit

用CSS变换裁剪图片

使用CSS变换进行裁剪是建立在前面讨论的长宽比裁剪技术之上的。这里的主要区别是，我们将使用CSStransform 属性来缩放、移动和旋转图像。

An image cropped using CSS Transforms

下面的代码块负责裁剪图像。

.cropped-image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55%;
    transform: scale(0.5) translate(0, 5%) rotate(30deg);
}

你也可以查看CodePen的完整实现。

参见CodePen上Habdul Hazeez(@ziizium)
的Pen
使用CSS变换裁剪图片。

优点

  • 这种方法可以保证图像的响应速度

缺点

  • 你仍然需要使用更多的代码来实现这一点

圆形图像与border-radius

当你需要将图像裁剪成圆形时，这种技术是你的选择之一，另一个是clip-path() ，我们将在文章后面讨论。

它的主要成分是border-radius 属性，其值为50% 。

在你急于把这个border-radius 的值添加到你想要的圆形图像中之前，请观察下面链接的CodePen中的代码。你会注意到，为了得到我们需要的圆，我们必须使用我们在上一节中讨论的完全平方技术。

A circular image that was cropped using border-radius

.cropped-image {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    border-radius: 50%; /* This results in the circle */
}

完整的实现。

参见CodePen上Habdul Hazeez(@ziizium)
的Pen
Crop-image-to-circle-with-border-radius。

如果没有这个黑客，你会得到一个椭圆形的蛋状结构，如下图所示。

The border-radius effect without the perfect-square hack

优点

  • 你可以实现一个完美的圆形、响应性的图像

缺点

  • 与使用circle() 值的clip-path() 函数相比，这种方法使用了更多的代码，基本上只有一行代码。

用overflow 和 ，使用父级和图像尺寸。width

这种技术采用了width 、height 和margin 属性来有效地裁剪图像。

你在图像容器以及图像本身上指定一个width 和height 。

对于图像容器来说，这些属性的值被设计为对图像的底部和最右边的部分进行切割。应用于图像本身的width 和height 值是用来缩放图像的。最后，你添加margin 值，这将平移图像。

结果是，图像被裁剪。

The image cropped with overflow and width

这里是负责的代码。

.cropped {
    height: 200px;
}
​
.cropped-image {
    width: 400px;
    height: 300px;
    margin: 21px 0 0 -158px;
}

CodePen包含完整的实现。

参见CodePen上Habdul Hazeez(@ziizium)
的Pen
Crop-image-using-parent-image-dimension-with-overflow-and-margin。

优点

  • 在裁剪图片时，你有更大的灵活性和精确度。

缺点

  • 当你把图片的width 和height 指定为100% ，裁剪后的图片在较小的视口上会被隐藏。

用margin-top 和 进行平移裁剪。margin-bottom

这种技术利用了顶部和底部的边距，并将其应用于图像本身。这些也可以与overflow 属性一起使用，其值设置为hidden 在父容器上。

Cropping the image with margin-top and margin-bottom

.cropped-image {
    width: 100%;
    height: 100%;
    margin: 33.12% 0; /* This is responsible for the cropping */
}

请参阅CodePen上Habdul Hazeez(@ziizium)
的Pen
Pan-to-Crop-image-using-Top-Bottom-margin。

优点

  • 需要的代码更少

缺点

  • 这种裁剪技术不适合用于较小视口的图片
  • 高的负边距值会掩盖放置在被裁剪图像之前的网页元素。

用margin-left,margin-right, 和平移来裁剪。width

这与前面讨论的技术相似，但在这里，你利用了左右边距来裁剪图像。这使你有能力指定裁剪后的图像的宽度。

Pan to crop with margin-left and margin-right

这里是负责的代码。

.cropped-image {
    width: 100%;
    margin: 0 34.88%;
}

CodePen包含完整的实现。

参见CodePen上Habdul Hazeez(@ziizium)
的Pen
Pan-to-crop-with-Right-Left-margin-and-width。

优点

  • 裁剪后的图片是有反应的

缺点

  • 你只能沿着X轴裁剪，也就是水平线。

使用clip-path() 功能进行裁剪

我把最经典的留到了最后!有了clip-path() 函数和它的polygon() 值的组合，你的裁剪能力只受限于你的想象力。

Cropping with clip-path

下一个代码块是负责前一张图片裁剪的clip-path() 代码。

.cropped-image {
    height: 100%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

如果你很难理解上面的clip-path() 代码，这篇关于使用clip-path()的CSS动画的文章详细介绍了如何阅读、理解和绘制自己的clip-path() 代码。

下面的CodePen也包含完整的实现。

参见CodePen上Habdul Hazeez(@ziizium) 的Pen
Crop-image-with-CSS-clip-path()
。

可访问性

如果一张图片包含的信息在你裁剪时将会丢失，无论浏览器的视口如何，你最好不要裁剪图片。

建议你在使用本文所涉及的一些CSS属性之前，先检查一下浏览器的支持情况。大多数技术都被现代网络浏览器所支持，但你应该注意，微软的Internet Explorer不支持object-fit 和clip-path() 。

如果你不确定某个东西是否被支持，你可以采用像Can I Use这样的在线工具来查看最新的情况。

性能

我在本文的CodePen演示中使用的图片是相当大的，1920 x 1282，459 kB。当在你的项目中使用图片时，你应该确保你不会向你的用户发送大文件，浪费他们的带宽。

如果你使用PNG图像文件，你可以使用TinyPNG这样的工具来压缩它们。

总结

本文用八个不同的例子解释了如何用CSS裁剪图片，并快速讨论了每种方法的优点和缺点。大多数现代浏览器都支持这些例子，但Internet Explorer 11是一个明显的例外。

The postAn deep look at cropping images in CSSappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝