圖片鋪滿div，自適應容器大小，不會拉伸變形

小程序

mode屬性

scaleToFill：縮放模式，不保持縱橫比，圖片拉伸至填滿 image 元素
aspectFit： 縮放模式，保持縱橫比，保證圖片的長邊能完全顯示出來。
aspectFill： 縮放模式，保持縱橫比，保證圖片的短邊能完全顯示出來，長邊截取。
widthFix： 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix：縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變
其他的不實用，不做講解

例子：只有這樣寫才能保證圖片寬高小于大于box展示大小的圖片都能不變形的鋪滿顯示

<view class="comm__box"><image class="comm__img" mode="widthFix" src=""></image> </view> .comm__box{width: 100%;height: calc((100vw - 40px) * 250 / 690);background: #fff;position: relative;overflow: hidden; } .comm__mg {min-width: 100%;min-height: 100%;position: absolute;top: 25%;left: 50%;transform:translate(-50%,-25%);display: block; }

2. 使用bindload綁定函數(shù)動態(tài)自適應
思路：獲取到原圖的寬度和高度。

然后計算他們的寬高比率。。然后設置一個寬度大小（rpx），最后通過style動態(tài)設置image的寬高。

<image src="../uploads/2.jpg" bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image> var app = getApp() Page({data: {imgwidth:0,imgheight:0,},onLoad: function() {},imageLoad: function(e) {var _this=this;var $width=e.detail.width, //獲取圖片真實寬度$height=e.detail.height,ratio=$width/$height; //圖片的真實寬高比例var viewWidth=500, //設置圖片顯示寬度，viewHeight=500/ratio; //計算的高度值this.setData({imgwidth:viewWidth,imgheight:viewHeight})} })

h5

1. object-fit屬性，對應小程序的mode
思路：直接給img套用一個object-fit:cover;讓img填滿盒模型。
代碼：

img{width: 100%;height: 100%;object-fit:cover; }

缺點：由于是新代碼，在一些瀏覽器上還不兼容。回退機制上，如果瀏覽器不認識object-fit，那整個圖片就會被強制拉伸成容器的尺寸。

2. min
思路：通過對img元素定位，并將它的高度和寬度設置一個最小滿屏值?？梢愿鶕?jù)不同定位來顯示大圖的展示區(qū)域
代碼例子：

div{position:relative;overflow:hidden;width: 100%; height: calc((100vw - 40px) * 250 / 690); } div img{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);display: block;min-width: 100%;min-height: 100%; }

缺點：父容器顯示區(qū)域寬高固定。圖片寬高任意一尺寸小于容器時，這個情況是正常的，但如果圖片的寬高都大于容器，圖片也能鋪滿，但容器就只顯示大圖的其中部分。

總結

以上是生活随笔為你收集整理的小程序 、h5图片铺满div，自适应容器大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。