踩坑(css3+h5)_background-size属性

在设置背景图时由于没有掌握background-size属性踩了不少坑，今天来详细记录一下background-size属性

前提：背景图片不能撑开盒子

首先我们知道一点 背景图片不能撑开盒子！若是一个盒子需要设置背景图片，必须给元素设置宽高或者是有足够多的内容撑开盒子。

• 通过下述案例进行说明

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      background: url('https://img.iwave.net.cn/qm/bca563f9f95810f42012deff8cead6bd.png') no-repeat top ;
    }
  </style>
  <div class="box"></div>
  

  给box元素设置了一个背景图，但是并没有给元素设置宽高，在浏览器运行发现结果为一个空页面
  
  原因就是因为背景图片不能撑大盒子！

background-size的属性值详解

前提：图片并不能撑开盒子，要想显示背景图片，需要元素设置宽高或有足够的内容撑开盒子的前提下。

• [1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示
  • 图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)
  • 图片宽高 小于等于 元素宽高 -> 正常展示(元素会有留白)
• [2] 当元素设置background-size属性值为 contain时，图片会进行等比例缩放，至最大的一边将盒子完全盖住,可能会有留白；
• [3] 当元素设置background-size属性值为 cover时，图片会进行等比例缩放，至最小的一边将盒子完全盖住，可能内容被截断至图片不能完全显示；
• [4] 当元素设置background-size属性值为 x auto时，图片会根据图片宽度的缩放情况等比例缩放高度;
• [5] 当元素设置background-size属性值为 auto y时，图片会根据图片高度的缩放情况等比例缩放宽度;
• [6] 当元素设置background-size属性值为 x y时,图片的宽高即为设置的值，存在图片变形的情况；
• [7] 设置的单位可以为px也可以是百分比

案例：全页背景图

现有图片尺寸为 375 * 900 ，需要将这个图片设置为一个移动端页面的背景图(手机屏幕大小不一) ，在页面底部添加一个文本 ¥9.9，展示样式如下：

• 思考：首先分析一下这个图片的比例 与 现在大部分手机的比例
  • 图片大小为375 * 900 图片的宽高比为1:2.4
  • 手机屏幕宽高如下
    • 320 * 568 -----> 768
    • 375 * 667 -----> 900
    • 375 * 812 -----> 900
    • 414 * 896 -----> 993.6
• 分析

  • 此时我们不能设置固定大小的宽高，因为不同的手机型号的宽高不同；

  • 不能设置cover,否则图片等比缩放后，一般高度显示不完全；

  • 不能设置contain,否则等比缩放后，一般高度展示完全，宽度左右两边会有留白。

  • 若是采用 x auto的形式 ===> 宽度设置100%，确保宽度显示没有问题，高度根据宽度的缩放比例等比缩放；但是此时还有一个问题->页面的高度设置为多少呢？若是高度设置的小了，导致背景图高度方向不能完全展示(被截断)；若是高度设置的大了，导致元素高度方向会有留白
    [1] 100vh(不可取)：图片的宽高比为1:2.4 ，发现大部分的手机型号的宽高比小于1:2.4，因此设置100vh在大部分手机都会导致图片高度方向被截断(展示不完全)—> 此时若是高度设置100vh相当于设置了cover;
    [2] 设置页面高度为900px(图片的原始高度)

    背景图w	背景图h	手机h &页面h	展示情况
    320	768	900	背景图展示完全 页面底部有少量留白
    375	900	667 & 900	展示完全,出现滚动条 完美适配
    414	993	896 & 900	展示不完全 底部黄色底色被截断

    因为是按照宽度为375的型号设置的，因此对于宽度为375的手机可以展示完全，对于其他手机型号要么就底部留白要么就是底部被截断。
    [3] 通过媒体查询根据不同屏幕的高度给元素设置不同的height;
    此时可以使用媒体查询，针对不同宽度手机的屏幕，设置不同的height(需要适配哪个手机型号就在媒体查询添加哪个元素的宽度，在此不一一列举);

    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        height: 900px;
        background: url('https://img.iwave.net.cn/qm/bca563f9f95810f42012deff8cead6bd.png') no-repeat top red;
        background-size: 100%;
      }
      @media screen and (min-width: 320px) {
        .box{
          height: 768px;
        }
      }
      @media screen and (min-width: 375px) {
        .box {
          height: 900px;
        }
      }
      @media screen and (min-width: 414px) {
        .box {
          height: 993px;
        }
      }
    </style>
    <div class="box"></div>
    

    [4] 高度设置图片原始高度+rem布局
    若是采用rem布局，就可以完美解决这个问题

    元素样式设置为
    height: 900px;
    background-size: 100%;

    以宽度为375 与 414为例进行说明

    我们在设置时只需要按照设置稿设置px单位，插件自动转化为rem单位；如这个背景图我们会进行如下设置

     height: 900px
    

    (插件配置的1rem = 37.5) 插件会将 900px转换为 900/37.5 = 24rem(注意：宽度改变这个rem的值也是不变的，即永远都是24rem)
    当在宽度为414的手机屏幕上时， 24rem = 24 * 41.4 = 993.6px ；背景图的高度在缩放之后为 414 * 900 / 375 = 993.6 ； 可以发现是对应的！
    也就是说在rem布局中，只需要将背景图设置为设置稿的高度，background-size的值设置为100% auto;则在所有的手机型号中，都可以将图片在元素中完美展示！

    需要注意的是 在控制台看到的rem单位转化的值，并不是我们在代码里面设置的值，比如下图，在代码里设置的是

      width:100%;
      height:900px;
    

    在图片里面设置的值是如下这样转化而来

      width:414px;
      // 插件默认设置的1rem = 37.5
      height:  900 / 37.5 = 24rem * 41.4 = 993.5 px
    

    
    要想在控制台查看 元素的原始尺寸，可以将手机宽度调整为 rem转换插件设置的尺寸( 当前项目设置的1rem=37.5，也就是说将宽度调整为375可以看到原始尺寸)
    

总结

若是想为一个页面设置背景图，该页面还需要适配不同的手机型号,则仅需要

• 前提：该移动端项目使用的是rem单位布局
• [1] 设置当前元素的高度为 设计图高度
• [2] background-size属性值为100% auto

这样，在不同屏幕下，都可以实现

• 宽度：完美适配
• 高度方面：
  • 不会留白
  • 不会被截断
  • 不会因为缩放比例导致变形
  • 有可能会出现滚动条，因为高度在转化之后极有可能大于100vh!
• 展示链接