成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ivydom / 3013人閱讀

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

一：background-size： contain 與cover的區(qū)別：
作用： 都是將圖片以相同寬高比縮放以適應(yīng)整個容器的寬高。
不同之處在于：
1.在no-repeat情況下，如果容器寬高比與圖片寬高比不同，

　　cover：圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被截掉；

　　contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區(qū)域；

PS:其實，從英文的意思來說：cover意味著“遮罩、遮蓋”---此處理解為“塞滿”較恰當，contain意為“包含”--也就是：我圖片雖然縮放了，但是整個圖是被“包含”在你里面的，你必須把我顯示完整、不能裁剪我一絲一毫~

2.在repeat情況下：cover:與上述相同；contain:容器內(nèi)至少有一張完整的圖，容器留白區(qū)域則平鋪背景圖，鋪不下的再裁掉。

例子：

先上原圖：寬高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,（其他代碼不變）那么此處的留白區(qū)域會再平鋪一張背景圖，而且肯定是鋪不滿一張的，那么這第二張背景圖才會被截斷；效果入下：

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");
參數(shù)解釋：

src="圖片路徑"，可以是相對，也可以是絕對；

sizingMethod：“scale|crop|image” 可選項。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。

　　 crop：剪切圖片以適應(yīng)對象尺寸。
　　image：默認值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
　　scale：縮放圖片以適應(yīng)對象的尺寸邊界。

PS:注意：如果設(shè)置了background-attachment:fixed;會是background-size屬性失效

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113155.html

相關(guān)文章

  • 前端實現(xiàn)：Medium（一）

    摘要：那我們來看一下這個首頁的布局是如何實現(xiàn)的為了實現(xiàn)全的覆蓋，第一個要做的就是設(shè)置的為，寬度的話，應(yīng)為是自動全覆蓋，就無需多做設(shè)置。 本文發(fā)表于前端觀察，最新改動可訪問我的博客或是相關(guān)Github Repo。 大家好，我是新人kalasoo，現(xiàn)在還處在試用期，作為一個自學(xué)出來的前端新手，能夠加入前端觀察實在是異常興奮。既然要一起來維護這個關(guān)于前端的博客，我一定會努力爭取我所...

    VishKozus 評論0 收藏0

  • background-size

    摘要：支持情況以及在移動開發(fā)的時候，需要尺寸減半的需要。實際看效果的時候，出現(xiàn)了問題，原來不能這么用。背景圖像縮放同時保留圖像原有的比例長寬比無論是圖像的寬度或高度超過背景區(qū)域以盡可能大的覆蓋背景區(qū)域。 background-size 支持情況：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 在移動開發(fā)的時候，需要尺寸減半的需要。 特別是在引入雪碧圖的時候...

    SolomonXie 評論0 收藏0

  • H5 分層屏幕適配

    摘要：單屏適配有或，多屏常見是依寬。整層適配為確保各層元素同步縮放，不走樣，每層的適配區(qū)應(yīng)當?shù)扔谠O(shè)計稿大小。直接的實現(xiàn)就是構(gòu)造和適配區(qū)一樣尺寸的容器，整層適配。值為時對應(yīng)適配。這下媽媽再也不用擔心我還原問題屏幕適配問題了。 轉(zhuǎn)載請注明出處：http://hai.li/2018/03/14/h5-screen-adaptation.html 設(shè)計大大，這次真的是 按設(shè)計稿來 了，因為現(xiàn)在，任何...

    Arno 評論0 收藏0

  • CSS學(xué)習(xí)筆記

    CSS學(xué)習(xí)筆記 在學(xué)習(xí)CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素 指定字符集 meta name=viewport content=...定義視圖大小與設(shè)備屏幕大小的比例，用戶是否可縮放 指定基準路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

    bawn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<