mpvue 微信小程序 Image 图片实现宽度100%，高度自适应

最新推荐文章于 2024-07-03 10:50:03 发布

原创最新推荐文章于 2024-07-03 10:50:03 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

mpvue 专栏收录该内容

30 篇文章

订阅专栏

本文主要介绍了如何在前端开发中实现图片的宽度自适应显示，通过设置mode=widthFix和width:100%;属性，使图片能够在不同屏幕尺寸下保持良好的视觉效果。

主要是设置mode="widthFix"和width: 100%;

<!-- 新手教程 -->
<template>
  <div class="center-tutorial">
    <img class="img" src="https://123.oss-cn-hangzhou.aliyuncs.com/666.jpeg" mode="widthFix">
  </div>
</template>

<style lang="less" scoped>
  .center-tutorial {
    .img {
      width: 100%;
    }
  }
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曹天骄

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序的常见面试题？

m0_68271787的博客

06-30

1501

随便打开一个招聘网站，你会发现市场对于小程序的需求还是蛮高的，有些公司可能就只需要写小程序的前端人员。故此，有了这样一篇小程序面试题的总结。整理了关于小程序面试常问的一些面试题，分享给大家。1、简单谈谈微信小程序在结构和样式方面，小程序提供了一些常用的标签与控件，比如：view，小程序主要的布局元素，类似于html标签的div，你也完全可以像控制div那样去控制view。scroll-view，你要滚动内容的话，没必要用view去做overflow，

微信小程序 之简答题

此心安处

12-26

9764

1 小程序的页面生命周期函数包含哪些？它们分别在什么时候触发？正确答案： (1)onLoad页面加载时触发 (2)onReady页面初次渲染完成时触发 (3)onShow页面显示时触发 (4)onHide页面隐藏时触发 (5)onUnload页面卸载时触发 2 简单介绍微信小程序、原生APP和Web App之间的区别。正确答案： 微信小程序：是继原生APP、Web APP之后出现的一种新的APP形态。适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。原生APP：由于Android和IOS

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

贱贱强 2019.10.09
谢谢你

mpvue小程序中图片根据自身宽高做自适应

halo1416的博客

11-19

1959

需求：小程序因为自身上传包大小的限制（每个包2M，使用分包总共可以上传8M），所以小程序的静态资源主要是放在服务器端（主要是图片资源）。但是从服务器获取图片时有可能出现下面一种情况：返回的是图片的url地址，但并没有图片自身的宽高 ==>> 导致结果：无法根据图片的宽高和屏幕宽度，计算得出图片的高度，从而给图片做自适应。计算高度的方法：图片自身宽度 / 图片自身高度 = 屏...

mpvue图片应该使用image

caihuawei123的博客

05-20

533

mpvue如果使用img标签会编译报错，应该用微信小程序自己的image <img src="../../static/images/10.jpg" alt="" @click="draw"/> 换为 <image src="../../static/images/10.jpg" alt="" @click="draw"/> WAIT Compiling...

微信小程序 Image 图片实现宽度100%，高度自适应

weixin_30750335的博客

02-05

408

做法如下：样式设置宽度100%， .img{ width:100%;} 添加属性mode="widthFix"， <imageclass="img" src="../../images/hello.png" mode="widthFix"> 转载于:https://www.cnblogs.com/hedianzhan/p/8419898.html...

评价图像质量SNR和PSNR

math_new_photo的博客

10-23

1854

评价图像质量 SNR方法 https://blog.youkuaiyun.com/itigoitie/article/details/91077307 计算步骤 1.使用待计算SNR图像（记为A）与原始图像（记为B）做相减运算，得到一幅图像（记为C）；我们将B视为A的信息部分，将C视为A的噪声部分； 2.分别计算B、C的方差； 3.计算上述两项之比，得到SNR的值。 4.对SNR的值对数化，得到以dB为单位的SNR值。下面是链接里的matlab代码： clc,clear,close all % 清理命令区、清理工作区

js通过URL快速获取图片宽高的方法

陈德优的博客

04-18

8026

快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onload方法要节省很多时间，甚至一分钟以上都有可能，并且这种方法适用主流浏览器包括IE低版本浏览器。一、简陋的获取图片方式js 代码:// 图片地址后面加时间戳是为了避免缓存var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441...

从零构建一个微信小程序

M_ik_Z的博客

01-20

3781

一、微信小程序介绍 微信小程序，简称小程序，英文名：Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 1.1 为什么是微信小程序？微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户。推广 app 或公众号的成本太高。开发适配成本低。容易小规模试错，然后快速迭代。跨平台。 1.2 还有其他的小程序不容忽视支付宝小程序百度小程序 QQ 小程序今日头条 + 抖音小程序 1.3 优秀的第三方小程序

微信小程序

每天都要努力学习哦~~

05-20

5706

目录环境准备注册账号获取APPID 开发工具小程序结构目录小程序文件结构和传统web对比基本的项目目录编辑⼩程序配置⽂件环境准备注册账号建议使用全新的邮箱，没有注册过其他小程序或者公众号的访问注册⻚⾯，耐⼼完成注册即可获取APPID 于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后，可登录，然后获取APPID。登录，成功后可看到如下界⾯然后复制你的APPID,悄悄的保存起来，不要..

微信小程序基本用法1(二)

L_u_c_k_y_m_a_n的博客

06-22

1163

1、模板语法 WXML（WeiXin Markup Language）是框架设计的⼀套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 1.1 小案例 1.1.1 先打开 app.json 文件,新建一个页面 1

在mpvue中使用img标签的注意事项

weixin_33672109的博客

04-27

1003

在使用mpvue开发小程序过程中，在使用img标签时出现问题， <img :class="cdCls" width="40" height="40" :src="currentSong.image">发现图片宽高并不是我们想象中的宽40，高40. 如下图所示： <img>标签会被编译成小程序中的<image>标签 . 在查看小程序官方文档：我们发现小程序的...

mpvue 学习笔记

DDDEBOKE

04-16

1534

1.<template> <div class="cas"> <ul id="list"> <li v-for="(item,index) in datalist" :key='index'> <img :src="item.src"/&

img 元素无法获取高度的问题

weixin_30340353的博客

11-18

450

项目里有这么一个功能，需要 ajax 从服务器端获取数据，然后本地生成 DOM 结构再 append 到页面上。其中的图片是直接拿到的图像数据，而不是 url，所以据此生成 dataURI 赋值给 img 元素，以此来显示图片。然后再根据 img 元素的高度进行下一步的计算。那么问题来了，通过 dataURI 赋值给 img 元素的，无论如何也没法获得 img 的高度，始终返回父元素的高度。 ...

mpvue小程序加载不出图片 Failed to load local image resource /images/xx.png

最新发布

05-14

<think>好的，我现在需要帮用户解决微信小程序中图片宽度自适应且高度为50%的代码示例问题。首先，我得回忆一下微信小程序的布局机制。微信小程序的样式通常使用Flex布局，图片组件image有mode属性可以控制图片的显示方式。用户的需求是宽度自适应，高度占屏幕的50%。那如何实现呢？首先，高度为屏幕的50%，可能需要用到视口单位，比如vh。因为百分比高度在父容器没有明确高度的情况下可能不生效。所以应该给外层容器一个明确的高度，比如设置page的高度为100vh，然后图片的高度设为50vh，这样就能占据屏幕的一半高度。然后，宽度自适应。图片的宽度如果设为100%，就会撑满父容器。但要注意image组件的mode属性，比如设置mode为widthFix，这样图片会根据设置的宽度自动调整高度，保持宽高比。不过这里用户希望高度固定为50%，所以可能需要结合其他mode值，比如aspectFill，这样图片会保持比例缩放，填满容器，可能会裁剪，但容器的大小由外层样式决定。接下来，结构方面，可能需要一个外层容器，设置高度为50vh，然后里面的image组件宽度100%，高度100%。或者直接设置image的高度为50vh，宽度auto。不过具体要看怎么布局才能让宽度自适应，同时高度准确。另外，微信小程序的rpx单位可以适配不同屏幕，但视口单位vh可能更直接。需要测试不同mode的效果，比如widthFix模式需要设置宽度，高度会自动计算，但用户需要固定高度，可能不太适用。而aspectFill模式可以在固定高度的容器中让图片宽度自适应，并且保持比例，可能会更合适。可能的代码结构是，在WXML中，使用一个view容器，设置样式高度为50vh，然后image的mode设为aspectFill，宽度100%，高度100%。这样图片会填满容器，宽度自适应，高度固定为屏幕的50%。还需要考虑图片可能被裁剪的问题，如果用户希望完整显示图片，可能需要使用其他mode，比如scaleToFill，但这样会拉伸图片。所以需要根据用户需求选择mode属性。总结步骤：设置外层容器高度为50vh，image宽度100%，高度100%，mode为aspectFill或合适的模式。同时确保page的高度设置正确，避免父容器高度影响。现在需要检查这些思路是否正确，是否有遗漏的情况，比如不同设备的兼容性，或者是否有更好的实现方式。另外，参考用户提供的引用中提到了image组件的mode属性可能效果不理想，可能需要更细致的调整。比如引用[^1]提到mode属性效果不佳，所以可能需要结合样式和布局来达到更好的效果。最后，给出代码示例，并解释每个部分的作用，确保用户能够理解并应用。同时，生成相关问题，比如其他适配方法、不同mode的区别，或者如何处理不同比例图片的问题。</think>### 实现方案 微信小程序中实现图片宽度自适应且高度为50%屏幕的布局，需结合`rpx`单位、`vh`视口单位和`image`组件的`mode`属性。以下是分步实现： #### 1. 外层容器设置 ```html  <view class="container"> <image src="/images/demo.jpg" mode="aspectFill" class="adaptive-image"/> </view> ``` #### 2. 样式定义 ```css /* WXSS */ .container { height: 50vh; /* 占据屏幕高度50% */ } .adaptive-image { width: 100%; /* 宽度自适应父容器 */ height: 100%; /* 继承父容器高度 */ } ``` #### 3. 关键点说明 - `height: 50vh`：通过视口单位固定外层容器高度为屏幕高度的50%[^2] - `width: 100%`：让图片宽度随父容器自动撑满 - `mode="aspectFill"`：保持宽高比缩放，裁剪多余部分防止变形[^1] $$ \text{适配公式}:\ \text{实际高度} = \min\left(\frac{\text{容器宽度}}{\text{图片宽高比}}, 50\text{vh}\right) $$ #### 4. 扩展优化若需避免图片裁剪，可改用`mode="widthFix"`并添加`aspect-ratio`属性： ```css .adaptive-image { width: 100%; aspect-ratio: 2/1; /* 根据图片实际比例调整 */ } ```