一个带有img的包装器是如何占据所有屏幕的

How a wrapper with img can take all the screen?

本文关键字：何占 屏幕 包装 一个 img      更新时间：2023-09-26

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

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

感谢

您是否尝试过将图像大小调整为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根据用户屏幕的宽度和高度动态调整图像的大小。

相关文章：