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

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

 

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

 

相關文章