Aru*_*yan 17 html javascript css image
我知道 HTML 图像的宽度和高度属性可以简单地通过<img src="Debian.jpg" style="height: 120px; width: 130px">.
我正在寻找的是，是否存在一个 CSS 属性，该属性只取一个值，%并根据该百分比缩放原始图像的宽度和高度。例如，如果高度和宽度Debian.jpg是1000x700与我指定50%在CSS属性然后将图像按比例缩小到500x350，因此纵横比被维持。
我很难在单独调整高度和宽度的同时保持图像的纵横比。如果这样的属性不存在，那么有什么方法可以保持纵横比并获得所需的图像尺寸？
是的，有一种方法可以保持图像的纵横比并将图像调整为原始尺寸的一小部分。但是，CSS 无法知道图像的内在大小（原始大小）。因此，您只能做两件事：
使用百分比值作为widthfor的值img是行不通的，因为百分比值解析为其容器大小的百分比，而不是其原始大小。下面，我演示了不起作用的例子。
话虽如此，我个人通常希望明确指定图像的宽度。例如，在大型设备上，我希望图像为 1080 像素。在较小的设备上，我希望图像为 560 像素。我可以简单地为明确大小的图像创建一个容器，将图像放在容器内，并将图像的宽度指定为 100%（其容器大小）。
如前所述，有两种方法可以使图像达到其原始宽度的 50%。首先，使用JS。其次，明确告诉 CSS 原始图像宽度。
intrinsicsize属性和通过 CSS设置width和style（仍然是实验性的，不受支持）。如上所述，最后两个解决方案不受大多数浏览器的支持，并且可能还不能正常工作。在我看来，将图像的宽度设置为其固有宽度的 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">