javascript - 我怎样才能使 适合整个浏览器？

Question

问题:如果你正在使用

<img>

在 html 中，您将如何在 css 中设置该元素的样式以使大图像适合浏览器窗口且没有空白？

情况:我正在做一个让我有点难过的元素。这个想法是网页背景的幻灯片。在 .html 文件中，我使用 javascript 创建了幻灯片。单个图像元素是 javascript 用来随机播放将出现的五个图像的元素。 (我现在只使用一个来调整尺寸。)

我的幻灯片可以播放，但我的图像很大，不能完全适合浏览器窗口。 :( 这告诉我，当我将它们插入 javascript 数组时，我的其他图像也会有同样的问题。(它们都很大)

我在想我可能必须使用 div 容器，但我不确定如何使用。我是新人。

这是我用于幻灯片的 javascript:

        <script type="text/javascript">
        var images = [
        "",
        "",
        "",
        "",
        "Raptor sand.jpg"
        ];
        </script>    

        <div class="container">
            <img src="Africa Twin Mountainside.jpg" id="slide" alt=""/>
        </div>

        <script>
        var step = 0;
        function slideit(){
        document.getElementById('slide').src = images[step];
        step++;
        if(step>=images.length)
        step=0;
        setTimeout("slideit()", 2500);                
        }
        slideit(); 
        </script>  

这是我的CSS

.container{
width: 100%;
height: 100%;
object-fit: contain;    
}

Answer 1

<div style="background-image: url('http://placekitten.com/1200/800'); background-size: cover; position: fixed; top: 0; right: 0; bottom: 0; left:0"></div>

(内联样式，因为我很懒。显然这些应该存在于样式表中)。

子出正确图像的 url。