javascript - 带有 img 的包装器如何占据所有屏幕？

Question

我有 2 个 div，一个是带有 img 的包装幻灯片，第二个是在幻灯片之后出现的内容。所以我想制作一个全屏幻灯片，不使用属性位置绝对或固定来保持内容的流动。对不起我的英语，我是法国人。

<div id="slide">
    <img src="bg.jpg" alt="" />
</div>
<div id="container">

</div>

谢谢

Answer 1

您是否尝试过将图片的宽度和高度调整为 100%？您的 div 当然也必须适应这一点，并且您的 body 和 HTML 标签的宽度和高度也必须为 100%...

<img width="100%" height="100%" src="bg.jpg" alt="" />

编辑:您可以使用此样式表来获取您在原始问题中提出的问题:

<style>
    *
    {
        padding:0;
        margin:0;
    }

    body, html
    {
        width:100%;
        height:100%;
    }

    #slide img 
    {
        width:100%;
    }
</style>

如果您想要更多控制(就像您稍后在评论中提到的那样)，您将需要使用 javascript 根据用户屏幕的宽度和高度动态调整图像大小。