Npcink Blog
切换菜单

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

关于图片的一个 css 技巧

要让容器与浏览器宽度,高度相等,可以通过设置 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; // 这个设置容器高度为浏览器高度

相关: