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

<dd class="OuterTab" artabid="304287650" arwindowid="3" style="top: 1px; z-index: 1; left: 71px; visibility: inherit; display: block;"><span class="TabLeft">&nbsp;</span>
<span class="Tab"><a href="javascript:" class="btn f1" style="color:#000000;">Categorization</a>
</span>
<span class="TabRight">&nbsp;</span>
<span class="TabLeft">&nbsp;</span>
<span class="Tab"><a href="javascript:" class="btn f1" style="color:#000000;">Categorization</a>
</span>
<span class="TabRight">&nbsp;</span>
</dd>

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

分出网址以获取正确的图片。

Answer 2

您可以使用jQuery执行此操作

＆＃13;

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

＆＃13;

如何使<img/>适合整个浏览器？

2 个答案: