我怎么适应 <img> 整个浏览器？

Question

问题：如果您正在使用

<img>

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

情况：我正在做一个让我有些困惑的项目。 这个想法是针对网页背景的幻灯片显示。 在.html文件中，我使用javascript创建了幻灯片。 单个图像元素是javascript用于随机播放将要出现的五个图像的元素。 （我现在仅使用一个来正确调整大小。）

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

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

这是我的slidesow的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>

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

细分网址以获取正确的图像。

Answer 2

您可以使用jQuery执行此操作

 <img src="picture.jpg" alt="My picture" id="target"> <script src="./jquery-3.1.0.js"></script> <script> $(document).ready(function() { $( "#target" ).height( $( window ).height() ); $( "#target" ).width( $( window ).width() ); }); </script>