H5图片满屏效果

最新推荐文章于 2024-01-30 10:19:08 发布

csdn-Allen

最新推荐文章于 2024-01-30 10:19:08 发布

阅读量4k

点赞数

文章标签：图片满屏还能滑动

本文链接：https://blog.csdn.net/baidu_41601299/article/details/89398034

版权

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>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

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