如何仅使用 CSS 调整图像大小并将图像裁剪为特定尺寸？

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

问题：

您想要显示来自 URL 的特定宽度和高度的图像，即使其长宽比与所需尺寸不同。目标是在保持原始比例的情况下调整图像大小，然后将其裁剪到所需的大小。

CSS解决方案：

要实现调整大小和裁剪，您可以结合以下技术：

• 调整大小：使用 HTML img元素的宽度和高度属性来调整图像大小。这将保持原始图像的纵横比。
• 裁剪： 创建具有所需最终尺寸的容器元素（例如 div）。为此容器设置隐藏的溢出以裁剪任何多余的图像。

实现：

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.crop img {
  width: 400px;
  height: 300px;
  margin: -75px 0 0 -100px;
}

<div class="crop">
  <img src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="Image">
</div>

在此示例中：

• 图像将被调整为宽度 200px 高度150px（保持宽高比）。
• margin 属性用于通过移动图像在容器内的位置来裁剪图像。
• 容器的溢出属性设置为隐藏，以确保只有图像的所需部分是显示。

结果：

此组合允许您以特定尺寸显示图像，同时保持其原始宽高比并裁剪它以适合您的需要尺寸。

以上是如何仅使用 CSS 调整图像大小并将图像裁剪为特定尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！