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

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

要求： 显示来自具有指定宽度和高度的 URL 的图像，无论其原始纵横比如何。应调整图像大小，然后裁剪以适合所需的尺寸。

解决方案：结合 img 和背景图像属性：

• 使用 img 来调整大小图像，同时保持其纵横比。
• 使用背景图像将调整大小的图像裁剪为所需的大小大小。

示例：

考虑尺寸为 800x600 像素的图像，我们希望将其显示为 200x100像素。

HTML:

<div class="crop">
    <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck">
</div>

CSS:

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

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

说明:

• .crop 类定义图像的容器及其所需的宽度和高度。
• img 元素用于调整图像大小，同时保留其纵横比。设置宽度和高度以保持原始尺寸比例。
• 负边距应用于 img 元素以使其在 .crop 容器中居中并裁剪。边距是根据原始图像的完整尺寸 (400px x 300px) 和所需的显示尺寸 (200px x 100px) 计算的。

这种方法允许您动态调整图像大小和裁剪图像，确保它们在各种设备上以所需的尺寸和宽高比显示。

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