H5图片满屏效果

最新推荐文章于 2024-09-10 22:17:11 发布

allen_csdns

最新推荐文章于 2024-09-10 22:17:11 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： H5图片满屏效果

本文链接：https://blog.youkuaiyun.com/allen_csdns/article/details/103420202

本文介绍了如何使用HTML和CSS实现H5页面中图片的满屏效果，通过调整元素样式，达到适应不同屏幕大小的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习计划课程介绍H5</title>
</head>
<body>
        <!--学习计划课程介绍H5-->
        <div class="first_box">
            <img src="../img/study_introduction/gif-bg-banner@2x.png" alt="" class="first_img">
        </div> 
        <div class="secend_box">
        </div>
    <!--引入jquery文件-->
    <script src="../js/jquery-1.12.3.min.js"></script>
</body>
</html>

CSS

/*整体做rem适配，100px相当于1rem*/
html{font-size:13.33333333vw}
/*全局css样式配置*/
*{
    padding: 0;
    margin: 0;
}
/* 学习计划课程介绍H5 */
.first_box{
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.first_img{
    position: absolute; 
    top: 0; 
    width: 100%;
    height:100%;
}
.secend_box{
    width: 100%;
    height:10rem;
    background-color:red;
}

公众号：
在这里插入图片描述
微信：