如何将<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>适用于整个浏览器？

回答

相关问题