时间戳

首页 > 解决方案 > 以 % 为单位缩放 HTML 图像的宽度和高度

javascript - 以 % 为单位缩放 HTML 图像的宽度和高度

问题描述

我知道 HTML 图像的 width 和 height 属性可以简单地通过<img src="Debian.jpg" style="height: 120px; width: 130px">.

我正在寻找的是是否存在一个 CSS 属性，它只接受一个值%并根据该百分比缩放原始图像的宽度和高度。例如，如果我在该 CSS 属性中指定了Debian.jpgare的高度和宽度，则图像会缩小到，因此会保持纵横比。1000x70050%500x350

我很难在单独调整高度和宽度的同时保持图像的纵横比。如果不存在这样的属性，那么有什么方法可以保持纵横比并实现图像的理想尺寸？

标签： javascripthtmlcssimage

解决方案

是的，有一种方法可以保持图像的纵横比并将图像调整为原始大小的一小部分。但是，CSS 无法知道图像的固有尺寸（原始尺寸）。因此，您只能做两件事：

  • 明确告诉 CSS 原始大小
  • 图片加载时使用JS获取原始大小

什么不起作用

使用百分比值作为widthfor 的值img不起作用，因为百分比值解析为它的容器大小的百分比，而不是它的原始大小。下面，我演示了不起作用的示例。

话虽如此，我个人通常想明确指定图像的宽度。例如，在大型设备上，我希望图像为 1080 像素。在较小的设备上，我希望图像为 560 像素。我可以简单地为明确大小的图像创建一个容器，将图像放在容器内，并将图像的宽度指定为 100%（其容器大小）。

什么有效

如前所述，有两种方法可以使图像达到其原始宽度的 50%。首先，使用JS。其次，明确告诉 CSS 原始图像宽度。

  • 使用 JS 方法，你只需要改变图像的宽度。加载后，获取图像的固有宽度，然后将新宽度设置为固有宽度除以 2。简单。
  • 显式地使用telling-CSS-explicitly 方法不太有利。此解决方案假定图像始终相同，并且需要您（开发人员）事先知道原始图像大小。当您更改原始图像大小时，您还需要更新您的代码。话虽如此，您可以通过在 CSS 类中指定CSS 自定义属性、指定提供固有宽度的属性（在 HTML 中）然后使用attr()（仍处于试验阶段且大多不支持）或使用intrinsicsize属性和通过 CSS设置widthandstyle（仍然是实验性的，不支持）。如前所述，最后两种解决方案不受大多数​​浏览器的支持，可能还无法正常工作。

在我看来，将图像的宽度设置为其固有宽度的 50% 的最佳选择是使用 JS。这是一个演示无效解决方案和 JS 解决方案的解决方案。如果您只更改图像的其中一个尺寸（宽度/高度），则会自动保持纵横比。

const imageJS = document.querySelector('.image--changed-with-js')

imageJS.onload = () => {
  const intrinsicWidth = imageJS.width
  imageJS.width = imageJS.width / 2
}
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0px;
}

img {
  margin: 20px 0;
}

/* Image has its intrinsic size (i.e. the original image size) */
.image--original {
  width: auto;
}

/* Image contained within a 500px container
 Image has a width of 50% of 500px = 250px */
.container {
  width: 500px;
}

.image--changed-with-container {
  width: 50%;
}

/* Image is not contained within a div
However, image is inside body
<body> is its container
It now has a width of 50% of the body
NOT 50% of its intrinsic width */
.image--changed-without-container {
  width: 50%;
}

/* Image changed using JS
You can get the intrinsic size through JS and modify its size there */
.image--changed-with-js {}
<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

<div class="container">
  <img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
</div>

<img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

<img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">

推荐阅读