在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%;
}

演示版