CSS-背景3-背景图尺寸

作者: Java小工匠 | 来源:发表于2017-08-10 21:00 被阅读0次

CSS-背景3-背景图尺寸
CSS背景图设置
[CSS] background-size
CSS-背景图
background-size
CSS-背景5-多张背景图
背景相关
知识点总结:09-按钮添加图片和背景图片的区别
CSS教你玩转背景图
章节(23) 背景相关

1、background-size : 100% 100% 与 cover 和 contain 区别

（1）100% 100% 图片宽度和高度的比例会被改变，填满盒子。
（2）cover 图片宽度和高度比例不变，填满盒子，超出部分会被裁剪。
（3）contain 图片宽度和高度比例不变，容器内至少有一张完整的图，容器留白区，铺不下的再裁掉。
基础素材，如下图片。

bg.png

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图尺寸</title>
    <style type="text/css">
    .image1{
        overflow: hidden;
    }
    .image100{
        background-image: url(bg.png);
        background-size: 100% 100%; 
        width: 300px;
        height: 300px;
        margin: 0px auto;
        float: left;
        border: 1px solid red;
        margin-right: 20px;
    }
    .image100-text{
        width: 300px;
        text-align: center;
        float: left;
        margin-right: 20px;
    }
    .imageContain{
        background-image: url(bg.png);
        background-size: contain; 
        background-repeat: no-repeat;
        width: 300px;
        height: 300px;
        margin: 0px auto;
        border: 1px solid red;
        float: left;
        margin-right: 20px;
    }
   .imageContain-text{
        width: 300px;
        text-align: center;
        float: left;
        margin-right: 20px;
    }
    .imageCover{
        background-image: url(bg.png);
        background-size: cover; 
        width: 300px;
        height: 300px;
        margin: 0px auto;
        border: 1px solid red;
        float: left;
    }
    .imageCover-text{
        width: 300px;
        text-align: center;
        float: left;
    }
    </style>
</head>
<body>
    <div class="image1">
        <div class="image100"> 
        </div>
        <div class="imageContain">
        </div>
        <div class="imageCover">
        </div>
    </div>
    <div class="image2">
        <div class="image100-text">background-size: 100% 100%;</div>
        <div class="imageContain-text">contain</div>
        <div class="imageCover-text">cover</div>
    </div>
</body>
</html>

运行效果：

image.png