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

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2506人閱讀

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

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

web端：

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

　object-fit CSS 屬性指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框

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

詳細的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;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
    }

 

轉載本人博文時請注明出處和原文地址！！！

 

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2005.html

相關文章

  • CSS及布局

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

    jaysun 評論0 收藏0

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

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

    freewolf 評論0 收藏1

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

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

    li21 評論0 收藏0

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

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

    AaronYuan 評論0 收藏0

發表評論

0條評論

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