使用CSS把背景图片铺满屏幕

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

前言

本文我们使用CSS实现把背景图片铺满屏幕（如下图所示）。

---

具体实现

代码实现也很简单，样式仅仅需要简单的四行即可。

• width: 100%; 表示一个元素的宽度将被设置为其父元素宽度的100%，即该元素会尽可能地扩展，以填满其父元素的整个宽度。
• height: 100vh; 表示一个元素的高度被设置为其视口（viewport）高度的100%。视口是用户在网页上能够看到的区域，它不包括浏览器的工具栏、标签栏等界面元素。
• background: url(“@/assets/images/baymax.png”) no-repeat; 表示使用该地址的图片作为背景，并且图片不重复。
• background-size: cover; 表示背景图片将被缩放以完全覆盖元素的背景区域，同时保持图片的宽高比不变。这意味着图片可能会被裁剪，以确保其覆盖整个背景区域，而且图片的宽高比不会失真。

<template><div class="login_container"></div>
</template><script setup lang="ts"></script><style lang="scss" scoped>
.login_container {width: 100%;height: 100vh;background: url("@/assets/images/baymax.png") no-repeat;/* 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 */background-size: cover;
}
</style>

---

---