zoukankan      html  css  js  c++  java
  • css之background的cover和contain的缩放背景图

    对于这两个属性,官网是这样解释的:

    contain

    此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

    等比例缩放图象到垂直或者水平其中一项填满区域。

    cover

    此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

    等比例缩放图象到垂直和水平两项均填满区域。

    读了还是不懂,那么看下面的例子:

    contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码

    .im-com{
        width:200px;
        height:50px;    
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
        background-size:contain;
    }
    .im-com-1{
        width:50px;
        height:100px;   
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
        background-size:contain;
    }

     
    当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。

    3 . cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。

    .im-com{
        width:200px;
        height:50px;    
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
        background-size:cover;
    }
    .im-com-1{
        width:50px;
        height:100px;   
        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
        background-size:cover;
    }

    当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。

  • 相关阅读:
    XPath使用示例
    CSS3中的弹性布局——"em"的用法
    Sublime Text3快捷键实用总结
    学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结
    JavaScript中的伪数组理解
    深入理解浏览器兼容性模式
    javascript 中使用instanceof需要注意的一点
    用人工智能学习,凡亿推出PCB问题解答智能搜索机器人:pcb助手
    Altium中坐标的导出及利用坐标快速布局
    Altium中Logo的导入方法及大小调整
  • 原文地址:https://www.cnblogs.com/freefish12/p/5776747.html
Copyright © 2011-2022 走看看