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

圖片變形很多人祭奠出了妖魔鬼怪般的各種大法，比如使用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有自帶的屬性方法:

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

 

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

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

 

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