开发避坑指南(14)：CSS背景图横竖屏自适应方案

原创已于 2025-08-20 22:28:56 修改 · 211 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js

于 2025-08-04 17:32:30 首次发布

避坑指南专栏收录该内容

71 篇文章

订阅专栏

需求背景

同一分辨率的背景图，需要在相同分辨率的两个屏幕上显示，两个屏幕不同的是一个是横向显示（1920x1080），一个是纵向显示（1080x1920）。现在的问题是屏幕纵向显示后，下方出现了一大截空白区域。那么如何让背景图自适应显示？

原代码

vue模版

<template>
  <div class="order-show">
      ......
  </div>
</template>

css样式

<style lang="scss" scope>
@media screen {
  .order-show {
    color: #f8f9fa;
    overflow-x: hidden;
    background: url(../image/order-show.png) no-repeat;
  }
}
</style>

解决办法

方案1：

在原来样式的基础上添加

background-repeat:no-repeat;  
background-size:100% 100%;

background-repeat 用于控制背景图像的平铺方式，决定图像在元素背景区域内的重复规则。no-repeat表示图像不重复，仅显示一。background-size: 100% 100% 表示背景图像‌拉伸至完全覆盖容器‌，‌不保持原始比例‌。这个方式虽然能填充空白处，但是背景图被拉伸变形了。那有没有更好的方案？

方案2：

在原来样式的基础上添加

background-repeat:no-repeat;
background-size: cover;

background-size的值改用 cover 或 contain 保持比例，能完全覆盖无留白，适合全屏背景。这种方式最合适。

扩展：

在 CSS 中，@media screen 是一种媒体查询规则，专门针对屏幕设备（如电脑、手机、平板等）应用样式规则。基本语法

@media screen and (条件) {
  /* 针对屏幕设备的样式规则 */
}

screen：限定规则仅适用于屏幕设备（不包括打印设备）。

and (条件)：可附加视口宽度、分辨率等条件（如 min-width: 768px）。