尝试使用window.innerHeight和Javascript设置图像高度

Trying to set image heights using window.innerHeight with Javascript

本文关键字：Javascript 设置 图像 高度 innerHeight window      更新时间：2023-09-26

我试图设置三个图像的高度，使每个图像都适合浏览器的内部高度，但我无法使其工作。

索引：

<img id="mindmap" src="~/content/bilder/mindmap02.jpg" />
<img id="mindmap" src="~/content/bilder/mindmap03.jpg" />
<img id="mindmap" src="~/content/bilder/mindmap01.jpg" />

CSS：

width: auto;
display:block;
margin-left: auto;
margin-right: auto;

脚本：

function imageHeight() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    if (w > h) {
        document.getElementById("mindmap").style.height = h -50 + "px";
    }
}
imageHeight();
window.onresize = function () {
    imageHeight();
};

请帮帮我！：（

已解决：

function imageHeight() {
    var w = window.innerWidth - 50;
    var h = window.innerHeight - 50;
    if (w > h) {
        document.getElementById('mindmap').style.width = h + 'px';
        document.getElementById('mindmap2').style.width = h + 'px';
        document.getElementById('mindmap3').style.width = h + 'px';
    }
}
imageHeight();
window.onresize = function () {
    imageHeight();
};

我使用style.width是因为图像是正方形的，这使它们更具响应性。

当您希望多个元素被"IDed"时，请为唯一的元素和类使用Id。现在你正试图同时找到三个元素。

图像的数量会是静态的吗？这不是一个动态的解决方案，但如果你只有三个图像，你可以在一个数组中引用它们，然后使用for循环遍历所述数组。每次通过后，它都可以在图像上运行该函数，检查图像的大小，并在需要时调整大小。

如果你要坚持使用ID，你应该更改它们（mindmap1，mindmap2…）。

相关文章：