如何將<img>適用於整個瀏覽器？

-1

<img>

在HTML

，你會怎麼風格元素在CSS使一個大的圖像適應瀏覽器窗口中沒有白色空間？

情況：我的工作有我有點難倒一個項目。這個想法是網頁背景的幻燈片。在.html文件中，我使用javascript創建了幻燈片。單個圖像元素是JavaScript用來隨機播放五個圖像的圖像元素。（我只是用一個現在得到上漿右）

我的幻燈片作品，但我的形象是巨大的，並不完全適合瀏覽器窗口。 :(這告訴我，當我將它們插入到JavaScript數組中時，我的其他圖像會有同樣的問題（它們都很大）

我在想，我可能不得不使用div容器，但我不是知道如何我是新來的傢伙

這裏是我的javascript與該slidesow：。

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

來源

2017-02-17 Isaiah Sias

我看不出這與腳本有什麼關係，都與HTML和樣式有關。 – RobG

使用'背景size'在CSS以下網站https://www.w3schools.com/cssref/css3_pr_background-size.asp –

它沒有，但我不能使用Mandar聖的想法，因爲在這種情況下的腳本我不得不使用圖像元素。如果有人想知道爲什麼我不只是使用背景圖像，我只是給了這個場景。 –

您可以使用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>

來源

2017-02-17 04:21:28

爲什麼要用jQuery來做一件可以通過香草javascript完成的事情？另外，OP甚至沒有用jQuery來標記問題。 – asprin

我只是發佈一種方式來完成這項工作。 –

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

（內嵌樣式，因爲我是懶惰。顯然這些應該生活在樣式表中）。

子，從網址爲正確的圖像。

來源

2017-02-17 04:22:44 monners

如何將<img>適用於整個瀏覽器？

回答

相關問題