在JavaScript数组中调整幻灯片图像的大小以适合视口

Question

我的第一篇文章，如果格式不好，我深表歉意。

我有一个项目正在尝试使用Javascript创建幻灯片。 我将图像放入一个数组中，并开始运行幻灯片。

我面临的问题是图像远大于视口。 我看过这篇文章以及这篇文章和许多其他文章。 它们解决了重新调整大小的问题，但不适用于数组中的图像，或者该解决方案要求将图像添加到HTML中，这不是我要尝试做的。 我尝试使用CSS，但无法正常工作，请使用

$（“＃libImage”）。style.width = '50％';
$（“＃libImage”）。style.height ='自动';

仅更改您可以看到的图像大小，而不更改图像本身。 我尝试做的事情甚至可能实现吗？如果可以，应该在什么地方以及什么地方使用它来获得想要的结果？

非常感谢你的帮助。

的HTML

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

Java脚本

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);
    });

多谢您的回覆，不便之处，敬请原谅。 它的效果与我得到的不一样，但问题相同。 图片未按比例放大显示。

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

Answer 1

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

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

并替换$("#libImage").css("background", "url(images/" + images[i] + ")"); 与$("#libImage img").prop("src", images[i]);

和CSS更改是：

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

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

演示版