亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

如何使用css來讓圖片居中不變形 微信小程序和web端適用

番茄西紅柿 / 2625人閱讀

摘要：被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加黑邊。如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應(yīng)。

圖片變形很多人祭奠出了妖魔鬼怪般的各種大法，比如使用jq來寫，或者使用css表達式來寫。今天我總結(jié)的是使用css3來寫，唯一最大缺點就是對一些瀏覽器版本不夠兼容。下面就是關(guān)于如何使用css來讓圖片居中不變形

web端：

img{vertical-align:middle;object-fit: cover}
object-fit: cover 的效果和background-size:cover;的效果一樣，一個缺點就是容器不夠適應(yīng)的原圖大小的比例的話，會按照比例進行放大裁剪

　object-fit CSS 屬性指定替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框

　　fill
被替換的內(nèi)容大小可以填充元素的內(nèi)容框。 整個對象將完全填充此框。 如果對象的高寬比不匹配其框的寬高比，那么該對象將被拉伸以適應(yīng)。
　　contain
被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
　　cover
被替換的內(nèi)容大小保持其寬高比，同時填充元素的整個內(nèi)容框。 如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應(yīng)。
　　none
被替換的內(nèi)容尺寸不會被改變。
　　scale-down
內(nèi)容的尺寸就像是指定了none或contain，取決于哪一個將導(dǎo)致更小的對象尺寸

詳細的object-fit方法的介紹可以查看mdn文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

 

微信小程序端這塊比較靈活，除了可以使用以上的方法之外，微信小程序image有自帶的屬性方法:

http://122.114.109.181:8888/img/webiste/2018/05/20180524092901026881.png mode="aspectFill">

 

重點就是：mode="aspectFill" 這塊，詳細介紹如下：aspectFill和object-fit: cover一樣，都是和background-size:cover效果差不多

    scaleToFill{
        background-size:100% 100%;//不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
    }
    aspectFit{
        background-size:contain;//保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
    }
    aspectFill{
        background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
    }

 

轉(zhuǎn)載本人博文時請注明出處和原文地址！??！

 

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

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

相關(guān)文章

  • CSS及布局

    摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準備。這兩種方式實現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應(yīng)。主要是對于標準里的布局方式草案中的布局方式進行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看...

    jaysun 評論0 收藏0

  • 記錄一下自己的春招，唯品會、360、京東offer已收、騰訊offer_call已達！??！

    摘要：春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實習(xí)生的騰訊的是早上打過來的。 春招結(jié)果 五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...

    freewolf 評論0 收藏1

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    li21 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    AaronYuan 評論0 收藏0

發(fā)表評論

0條評論

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