使用 CSS 显示调整大小和裁剪的图像

在前端开发中，我们经常会需要在页面中添加图片。不仅如此，还需要对图片进行调整大小、裁剪等操作。在这篇文章中，我将介绍如何使用 CSS 来实现这些功能。

调整大小

调整图片的大小是一种常见的操作。假设我们有一张图片，它的宽度为 400 像素，我们想将它的宽度调整为 200 像素。我们可以使用以下 CSS：

img {
  width: 200px;
}

这将使图片的宽度调整为 200 像素。同样的，我们也可以使用 height 属性来调整图片的高度。

如果我们想同时调整宽度和高度，可以使用 max-width 和 max-height 属性，如下所示：

img {
  max-width: 200px;
  max-height: 200px;
}

这将使图片的宽度和高度都不会超过 200 像素。

裁剪图片

有时候，我们需要裁剪一张图片以适应页面布局。可以使用 CSS 的 clip 属性来实现这一点。例如，我们有一张图片，它的宽度为 400 像素，高度为 300 像素，我们想将它裁剪为宽度为 200 像素，高度为 150 像素。我们可以使用以下 CSS：

img {
  width: 200px;
  height: 150px;
  clip: rect(75px, 225px, 225px, 75px);
}

rect() 函数接受四个参数，分别表示裁剪框的上边界、右边界、下边界和左边界。在这个例子中，我们将裁剪框的上边界和左边界设置为图片的左上角，右边界和下边界设置为图片的右下角的位置。

添加边框和圆角

除了调整大小和裁剪之外，我们还可以使用 CSS 来添加边框和圆角。这些样式可以帮助我们使图片更加美观。例如，我们可以添加一个 2 像素宽度的黑色边框和 10 像素的圆角：

img {
  border: 2px solid black;
  border-radius: 10px;
}

border 属性接受三个参数，分别表示边框的宽度、类型和颜色。border-radius 属性表示边框的圆角程度。

总结

在这篇文章中，我们学习了如何使用 CSS 来调整大小、裁剪和添加边框和圆角。这些技术可以帮助我们创建出更加美观的图片。