uniapp图片自适应显示，不裁剪

先看图：

这是长图和方图的显示效果，都可以完全显示出来
上代码：
html部分：

<view class="question-title" style="width: 100%"><image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3491947403,393487586&fm=26&gp=0.jpg" mode="aspectFit"></image>
</view>

js部分：

imageLoad: function(e) {var $width=e.detail.width,    //获取图片真实宽高$height=e.detail.height,ratio=$width/$height;    //图片的真实宽高比例var viewHeight=186,           //设置图片显示高度viewWidth=186 * ratio;    //计算的宽度值const query1= uni.createSelectorQuery().in(this);query1.select('.question-title').boundingClientRect(data => { // 获取图片区域的宽度console.log(data)if (viewWidth > data.width) { // 如果计算出来的图片宽度大于图片区域的宽度，则重新计算viewWidth=data.width          //固定图片宽度为区域宽度viewHeight=viewWidth / ratio; // 根据比例计算高度}var image= this.images; image = {width:viewWidth,height:viewHeight}console.log(image)this.images = image}).exec();
}

uniapp图片自适应显示，不裁剪相关推荐

uni-app 图片自适应视图容器
uni-app 图片自适应视图容器 uni-app中图片直接加background-size,等设置尺寸的属性无效例 <view><image style="backgr ...
html5裁剪后的图片不显示怎么办,裁剪后的图片不显示？？
按照老师在React Native Android原生模块开发实战中裁剪图片的例子来写的: render() { let imgUrl =Platform.OS==='android'? 'file: ...
uniapp图片无法显示
首先确定是在什么环境下不展示图片,确定你的标签是<img>还是<image>,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法. 一.引用本地文件中存储的图片 ...
css 图片大小自适应div,CSS 图片自适应显示宽度
这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...
uniapp图片自适应_uni-app下input组件基于内容自适应宽度的实现
1.需求设计图是'单价'编辑项是input,随输入内容自己改变,前后有而fix(如果单位'￥/片'放后面那就好做多了):但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制 ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）
[2021/07/06] 更新第二种方式,目前已在项目上应用采用padding-top百分比的方法,具体操作如下: 1.计算padding-top值(例如图片宽1920,高1080) padding ...
uniapp图片自适应_uniapp 仿微信朋友圈，微博晒图图片自适应排版
data() {return{ imgPicList: [], imgboxtype:0, imgwidth:0, imgpad:0, imgheight:''} }, props: { imgLis ...
uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误
效果图完整代码 <template><view><image :src="popupImgSrc1" mode="aspectFit&qu ...

uniapp图片自适应显示，不裁剪

uniapp图片自适应显示，不裁剪相关推荐

最新文章

热门文章