javascript - 调整 JavaScript 数组中幻灯片图像的大小以适合视口(viewport)

Question

我的第一篇文章，如果格式不好，请见谅。

我有一个元素，我正在尝试使用 Javascript 创建幻灯片。我已将图像放入数组中并开始播放幻灯片。

我面临的问题是图像比视口(viewport)大得多。我看过 this发布以及this邮政和许多其他人。他们解决了重新调整大小的问题，但不适用于数组中的图像，或者解决方案需要将图像添加到 HTML，这不是我想要做的。我曾尝试使用 CSS，但它不起作用并使用

在 javascript 中添加行

$("#libImage").style.width = '50%';
$("#libImage").style.height = '自动';

只改变你能看到的图像的大小，而不是图像本身。对于我正在尝试做的事情，这甚至可能吗？如果可以，我应该在什么地方使用它来获得我想要的结果？

非常感谢您的帮助。

HTML

<div id="libImage"></div>

Javascript

var images = ["../images/lib-orange.jpg", "../images/lib-main.jpg", "../images/lib-powel.jpg", "../images/lib-ostrander.jpg"];

    $(function () {
        var i = 0;
        $("#libImage").css("background", "url(images/" + images[i] + ")");
         setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#libImage").fadeOut("slow", function () {
                $(this).css("background", "url(images/" + images[i] + ")");
                $(this).fadeIn("slow");
            });
        }, 3000);
    });

感谢您的回复，抱歉耽搁了。它与我得到的效果不同，但它是同样的问题。图片未按视口(viewport)大小显示。

https://jsfiddle.net/e6ywm5j2/5/

Answer 1

我使用 img 标签代替 background: url()

<div id="libImage"><img src="" ></div>

并用 $("#libImage img").prop("src", images[i]);

CSS 的变化是:

div { width: 100%; height: 100vh; text-align: center; }

img {
  max-height: 90%;
  max-width: 90%;
}

Demo