如何使用 HTML 和 CSS 调整图像大小和裁剪图像，同时保持宽高比？

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

简介

显示特定尺寸内的图像同时保持其纵横比可能具有挑战性。本文探讨了如何结合使用 HTML 和 CSS 技术来有效地调整图像大小和裁剪图像。

背景图像调整大小

background-image 属性允许我们指定作为容器元素背景的图像。通过将background-size属性设置为cover，图像将自动调整大小以适应容器，同时保持其比例。

图像调整大小

标签可用于在网页中嵌入图像。通过指定宽度和高度属性，我们可以显式设置所需的尺寸。但是，如果不保持原始宽高比，则可能会导致图像失真。

组合技术

为了同时实现调整大小和裁剪，我们可以组合上述方法。我们创建一个容器元素，设置了背景图像属性和所需的背景大小。在容器内，我们放置一个 尺寸小于容器的元素。通过仔细调整 的边距属性，元素，我们可以有效地将图像裁剪为所需的尺寸，同时保持其原始纵横比。

示例

以下代码演示了如何调整图像大小和裁剪图像：

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

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

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

在此示例中，尺寸为 200px 的容器元素 (

) 150px 包含尺寸为 400px x 300px 的图像 ()。通过将容器上的溢出设置为隐藏，图像将被裁剪，并通过操作 的边距属性来裁剪图像。元素，生成的图像被有效地调整大小和裁剪以适合容器，同时保留其纵横比。

以上是如何使用 HTML 和 CSS 调整图像大小和裁剪图像，同时保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！