鍍金池/ 問答/HTML5  HTML/ 用 css 實現(xiàn) 微信小程序 image 組件的 mode = aspectFi

用 css 實現(xiàn) 微信小程序 image 組件的 mode = aspectFill 讓圖片按比例響應(yīng)式縮放、并自動裁剪的css

圖片描述

微信小程序 image

保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。

html 結(jié)構(gòu)

<div class="pic-box">
    <img :src="item.picture" />
</div>

由于圖片 的長短不一， 比例不固定。

這里有一篇 用背景圖實現(xiàn)的 實列

回答
編輯回答
筱饞貓

css 本身是有一個比較小眾的屬性 object-fit，

只需要給img標簽設(shè)置object-fit: cover就Ok了，和background-size:cover;的效果一樣，

如果在手機上的話，可以放心使用，如果在pc上使用的話，需要考慮一下兼容性，它不兼容IE

具體可以參考文檔

MDN object-fit

2018年7月18日 22:56