我怎么適應 <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>