background-size： contain 与cover的区别，以及ie78的兼容写法

ivydom 发布于2019-08-29 15:11 / 2980人阅读

摘要：一与的区别作用都是将图片以相同宽高比缩放以适应整个容器的宽高。这就涉及到俺最开始说的了。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。增大或减小对象的尺寸边界以适应图片的尺寸。注意如果设置了会是属性失效

一：background-size： contain 与cover的区别：
作用：都是将图片以相同宽高比缩放以适应整个容器的宽高。
不同之处在于：
1.在no-repeat情况下，如果容器宽高比与图片宽高比不同，

　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

PS:其实，从英文的意思来说：cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当，contain意为“包含”--也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫~

2.在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

例子：

先上原图：宽高600*1069

代码：

css代码之no-repeat:cover版：

.img-block{

        width: 200px;
        height: 200px;
        border:2px solid black;
        background:url(../img/justice.jpg) no-repeat;
        background-size:cover;
    }

效果图:

看的出来：cover的效果是：图片同比缩放、塞满整个容器，而图片多余的部分则被剪掉了；

css代码之no-repeat:contain版：

.img-block{

        width: 200px;
        height: 200px;
        border:2px solid black;
        background:url(../img/justice.jpg) no-repeat;
        background-size:contain;
    }

效果图：

看得出来：contain版：图片同比缩放至图片能完全显示在容器中，故容器有留白。so,这就涉及到俺最开始说的background-repeat了。

如果情况变成background-repeat:repeat,（其他代码不变）那么此处的留白区域会再平铺一张背景图，而且肯定是铺不满一张的，那么这第二张背景图才会被截断；效果入下：

CSS代码

background-repeat:repeat情况之background-size:contain版

    .img-block{
        width: 200px;
        height: 200px;
        border:2px solid black;
        background:url(../img/justice.jpg);
        background-size:contain;
    }

二：background-size 在ie78的兼容写法：用filter滤镜

css中加入一句：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/justice.jpg",sizingMethod="scale");
参数解释：

src="图片路径"，可以是相对，也可以是绝对；

sizingMethod：“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

　　 crop：剪切图片以适应对象尺寸。
　　image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
　　scale：缩放图片以适应对象的尺寸边界。

PS:注意：如果设置了background-attachment:fixed;会是background-size属性失效

云服务器 GPU云服务器互联网专线与宽带的区别功能测试与性能测试的区别性能测试与功能测试的区别云服务器公网与专网的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113155.html

前端实现：Medium（一）

摘要：那我们来看一下这个首页的布局是如何实现的为了实现全的覆盖，第一个要做的就是设置的为，宽度的话，应为是自动全覆盖，就无需多做设置。本文发表于前端观察，最新改动可访问我的博客或是相关Github Repo。大家好，我是新人kalasoo，现在还处在试用期，作为一个自学出来的前端新手，能够加入前端观察实在是异常兴奋。既然要一起来维护这个关于前端的博客，我一定会努力争取我所...

VishKozus 2019-08-21 12:24 评论0 收藏0
background-size

摘要：支持情况以及在移动开发的时候，需要尺寸减半的需要。实际看效果的时候，出现了问题，原来不能这么用。背景图像缩放同时保留图像原有的比例长宽比无论是图像的宽度或高度超过背景区域以尽可能大的覆盖背景区域。 background-size 支持情况：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 在移动开发的时候，需要尺寸减半的需要。特别是在引入雪碧图的时候...

SolomonXie 2019-08-28 18:28 评论0 收藏0
H5 分层屏幕适配

摘要：单屏适配有或，多屏常见是依宽。整层适配为确保各层元素同步缩放，不走样，每层的适配区应当等于设计稿大小。直接的实现就是构造和适配区一样尺寸的容器，整层适配。值为时对应适配。这下妈妈再也不用担心我还原问题屏幕适配问题了。转载请注明出处：http://hai.li/2018/03/14/h5-screen-adaptation.html 设计大大，这次真的是按设计稿来了，因为现在，任何...

Arno 2019-08-30 14:09 评论0 收藏0
CSS学习笔记

CSS学习笔记在学习CSS的过程中做的一些记录，用于未来的快速回忆。 HTML常见元素和理解 head中的元素指定字符集 meta name=viewport content=...定义视图大小与设备屏幕大小的比例，用户是否可缩放指定基准路径 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 评论0 收藏0