background-size： contain 與cover的區別，以及ie78的兼容寫法

ivydom 發布于2019-08-29 15:11 / 2981人閱讀

摘要：一與的區別作用都是將圖片以相同寬高比縮放以適應整個容器的寬高。這就涉及到俺最開始說的了。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。增大或減小對象的尺寸邊界以適應圖片的尺寸。注意如果設置了會是屬性失效

一：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云服務器云服務器互聯網專線與寬帶的區別功能測試與性能測試的區別性能測試與功能測試的區別云服務器公網與專網的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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