关于background-size属性和图片自适应的理解

一、background-size：设定背景图像的尺寸。

浏览器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;

基本语法：background-size: length | percentage | cover | contain; 

1：length

    该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

2：percentage

     该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

3：cover

      把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

4：contain

      把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。 

理解：

背景图需给父元素设置固定宽高。

length、percentage可以理解为手动设置背景图的尺寸。length是具体值，percentage是父元素百分比（图片宽高比会变化）

cover 如果图片不足以覆盖背景区域，延展图片使其完全覆盖背景区域。（图片宽高比不变）

contain 延展图片，使其一边到达区域边缘即停止。（图片宽高比不变）如果宽度先到达，等同于background-size:100% auto

 

cover与contain的异同：

相同：都不改变图片比例，延展图片。

不同：contain延展到一边到达区域边缘即停止，cover会继续延展至另一边也到达区域边缘。

 

二、图片自适应

有些场景想要图片高度自适应，比如网站头部宽度100%的banner图，如果用背景图，要么变形，要么覆盖不全。

可以通过使用图片，并设置宽度100%来自适应解决。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .column {
                width: 100%;
            }
            .figure {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="column">
            <img class="figure" src="img/1.jpg"/>
        </div>
    </body>
</html>

 

三、响应式背景图（效果等同于二、图片自适应）

原理：使用padding-top:(percentage)把背景区域撑开，实现响应式背景图片

padding-top = （高度 / 宽度 ）＊ 100%
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .column {
                width: 100%;
            }
            .figure {
                padding-top: 30.85%;/* (宽/高) */
                background: url("img/1.jpg") no-repeat;
                background-size: cover;/* 背景铺满元素 */
                background-position: center;/* 兼容ie8及以下 */
            }
        </style>
    </head>
    <body>
        <h3>使用padding-top实现响应性图片</h3>
        <div class="column">
            <div class="figure"></div>
        </div>
    </body>
</html>

 

posted @ 2022-02-17 11:35  梁涛999  阅读(2509)  评论(0)  编辑  收藏  举报