怎么让图片占据整个页面

最新推荐文章于 2024-07-26 15:34:48 发布

jojo付啾啾

最新推荐文章于 2024-07-26 15:34:48 发布

阅读量4.5k

点赞数 2

分类专栏： CSS 文章标签： css 响应式图片

本文链接：https://blog.csdn.net/DreamFJ/article/details/70037635

版权

CSS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

下面列出三种方法让图片占据整个页面，适应窗口的大小。

方法一：
使用img标签，设置其宽高为100%，并设置定位position为absolute。

<!-- 样式部分 -->
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    </style>

<!-- body部分 -->
<body>
    <img src="A.png">
</body>

结果：
这里写图片描述
分析：设置成绝对定位脱离了文档流，对这个例子来说，就是img的布局不受的限制了，可以说是和平起平坐了，所以此时设置的高度100%就是浏览器的高度。

方法二：
使用img标签，设置其宽高为100%，不设置定位，设置html,body{height:100%;}。

<!-- 样式部分 -->
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    html,body{height: 100%;}
    /*不让滚动条出现*/
    body{overflow: hidden;}
    img{
        width: 100%;
        height: 100%;
    }
    </style>

<!-- body部分 -->
<body>
    <img src="A.png">
</body>

结果：
这里写图片描述

方法三：
使用背景图片background-size来设置。

<!-- 样式部分 -->
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url("A.png");
        background-size: 100% 100%;
    }
    </style>

<!-- body部分 -->
<body>
    <div></div>
</body>

结果和前面两个一样。

jojo付啾啾

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
怎么让图片占据整个页面

下面列出三种方法让图片占据整个页面，适应窗口的大小。方法一：使用img标签，设置其宽高为100%，并设置定位position为absolute。 <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100%;
复制链接

扫一扫

专栏目录