小程序、h5图片铺满div，自适应容器大小

图片铺满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绑定函数动态自适应
思路：获取到原图的宽度和高度。

然后计算他们的宽高比率。。然后设置一个宽度大小（rpx），最后通过style动态设置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元素定位，并将它的高度和宽度设置一个最小满屏值。可以根据不同定位来显示大图的展示区域
代码例子：

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%;
}

缺点：父容器显示区域宽高固定。图片宽高任意一尺寸小于容器时，这个情况是正常的，但如果图片的宽高都大于容器，图片也能铺满，但容器就只显示大图的其中部分。

小程序、h5图片铺满div，自适应容器大小相关推荐

微信小程序背景图片铺满全屏
效果图: 示例代码: 总结: 全屏的秘诀在于: background-size: 100% 100%; 阅读完有任何问题,联系我微信:ichatme002,备注来自[CSDN]
html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
CSS怎么将img图片填满父容器div自适应容器大小发布时间:2021-03-19 09:35:26 来源:亿速云阅读:114 作者:小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父 ...
图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码
转自:https://www.cnblogs.com/ymdi/p/15707504.html 需求:图片铺满父级元素,有些图片横向.有些是纵向,图片宽高比不一致,导致不能铺满或者变形.针对这种情况, ...
小程序webview不铺满_感恩宠粉季小程序优惠多多，一元秒杀不容错过！
11月感恩狂欢宠粉季 emmm, 我知道你们都是看见了标题,才进来的. 令人期待的感恩节将到来啦! 海虞新天地商业广场小程序秒杀福利来啦~ 限时秒杀,超低折扣... 这里通通都有! 更便捷,更优惠, ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
小程序背景图铺满整个屏幕
vxml: <view style='width:100%;min-height:100%;background-image:url("/images/tlbc_bg.png" ...
uni-微信小程序图片铺满屏幕
uni-微信小程序图片铺满屏幕在img标签里添加mode="widthFix" <image src="" mode="widthFix&q ...
原理：小程序image图片实现宽度100%，高度自适应
微信小程序的图片image有默认的宽高:width: 320px和height: 240px,这两个值让新手弄起来心情烦躁,连引入个icon图标就是变形,今天就记录一下我遇到的一种问题: 多图排列,我 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...

小程序、h5图片铺满div，自适应容器大小

图片铺满div，自适应容器大小，不会拉伸变形

小程序

h5

小程序、h5图片铺满div，自适应容器大小相关推荐

最新文章

热门文章

小程序 、h5图片铺满div，自适应容器大小

图片铺满div，自适应容器大小，不会拉伸变形

小程序

h5

小程序 、h5图片铺满div，自适应容器大小相关推荐

最新文章

热门文章

小程序、h5图片铺满div，自适应容器大小

小程序、h5图片铺满div，自适应容器大小相关推荐