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

 

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