开发者社区> 问答> 正文

如何让一张图片不重复铺满整个浏览器?

我把宽高都设为100%,backgroud-size:cover,图片也设置了不重复,但是没有看到效果浏览器缩小后图片并没有铺满整个网页,请教大神正确的该怎么写?谢谢!!

展开
收起
杨冬芳 2016-06-07 16:57:00 2322 0
1 条回答
写回答
取消 提交回答
  • IT从业

    要让容器与浏览器宽度,高度相等,可以通过设置html, body的width, height都为100%,然后用body来设置背景图片。也可以通过js自动调整容器的width与height。还有就是我最爱的下面神单位vw, vh。

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;  // 这个设置容器宽度为浏览器宽度
    height: 100vh; // 这个设置容器高度为浏览器高度
    2019-07-17 19:30:29
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载