Question

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

指数：

<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，因为图像是方形的，这使它们更具响应性。

Answer 1

当您希望多个元素被“标记”时，请将Id用于唯一元素和类。现在你正试图一次找到三个元素。

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

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

尝试使用带有Javascript的window.innerHeight设置图像高度

1 个答案: