国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ivydom / 3015人閱讀

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

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

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

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

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

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的效果是：圖片同比縮放、塞滿整個(gè)容器，而圖片多余的部分則被剪掉了；

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ū)域會(huì)再平鋪一張背景圖，而且肯定是鋪不滿一張的，那么這第二張背景圖才會(huì)被截?cái)啵恍Ч胂拢?br>

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” 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。

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

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

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

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

相關(guān)文章

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

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

    VishKozus 評論0 收藏0

  • background-size

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

    SolomonXie 評論0 收藏0

  • H5 分層屏幕適配

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

    Arno 評論0 收藏0

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

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

    bawn 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<