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

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2536人閱讀

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

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

web端：

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

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

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

詳細(xì)的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">

 

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

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

 

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

 

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

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

相關(guān)文章

  • CSS及布局

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

    jaysun 評(píng)論0 收藏0

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

    摘要：春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌?，所以?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會(huì)電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實(shí)習(xí)生的騰訊的是早上打過(guò)來(lái)的。 春招結(jié)果 五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌?，所以?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...

    freewolf 評(píng)論0 收藏1

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

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

    li21 評(píng)論0 收藏0

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

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

    AaronYuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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