微信小程序(八)图片的设定

注释很详细,直接上代码

上一篇

新增内容:
1.图片的三种常见缩放形式
2.图片全屏预览

源码:

testImg.wxml

<!-- 默认状态,不保证缩放比,完全拉伸填满容器 -->
<image class="pic" mode="scaleToFill" src="/static/uploads/slide_1.jpg"></image><!-- 保证缩放比,完全显示长边 -->
<image class="pic" mode="aspectFit" src="/static/uploads/goods_1.jpg"></image><!-- 保证缩放比,完全显示短边 -->
<image class="pic" mode="aspectFill" src="/static/uploads/goods_2.jpg"></image><!-- 实现全屏预览 -->
<image class="picOverall"  mode="aspectFit" src="/static/uploads/goods_1.jpg"></image>

testImg.wxss

.pic{//页面横向总长度为750rpxwidth: 300rpx;height: 300rpx;background-color: aqua;
}.picOverall{//高度设为100%以实现全图预览的效果height: 100vh;//长度占满屏幕长度width: 750rpx;background-color: palegoldenrod;
}

演示效果:

在这里插入图片描述

在这里插入图片描述

下一篇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/644083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

​分享最新五十首养生音乐,养五脏,解抑郁,去烦恼【附养生音乐下载地址+最佳聆听时间)】

​分享最新五十首养生音乐,养五脏,解抑郁,去烦恼【附养生音乐下载地址最佳聆听时间&#xff09;】 在中国医学巨作《黄帝内经》中记载&#xff1a; 肝属木&#xff0c;在音为角&#xff0c;在志为怒&#xff1b; 心属火&#xff0c;在音为徴&#xff0c;在志为喜&#xff1b; …

STM32单片机学习5--STM32中断

文章目录 一、前言二、NVIC中断控制器2.1、NVIC结构体成员2.2、抢占优先级和响应优先级2.3、NVIC的优先级组 三、EXTI外部中断四、中断实战4.1、确定连线4.2、配置中断控制端口4.3、配置中断端口4.4、配置中断服务函数4.5、主函数调用 一、前言 单片机无系统执行逻辑&#xff…

Java面试题(4)

14.说一下HashMap的实现原理 HashMap概述&#xff1a;HashMap是基于哈希表的Map接口的非同步实现&#xff0c;以键值对的存储形式存在&#xff0c;且线程 不安全。此实现提供所有可选的映射操作&#xff0c;并允许使用空键值对&#xff0c;但并不保证映射的顺序&#xff0c;尤…

关于使用jdk8自带的日期类getDayOfWeek()的详细解释

问题引入 我们会发现getDayOfWeek()这个函数和其他自带函数不一样 直接写会报错 但是如果我们将他变成getDayOfWeek().getValue() 又能够正常运行,我们这次就来看看是为什么 解释 进入getDayOfWeek()源码查看 我们进入getDayOfWeek()的源码中查看 我们可以发现他给我们返回的…

vivado:关联notepad++

网上好多都要下插件&#xff0c;看了野火视频&#xff0c;直接在vivado里面加路径弄好的 2 3&#xff08;那个fonts and colors也经常用 改字体&#xff09; 4 5 以下是我的路径 D:/gongjuruanjian/notepad/Notepad/notepad.exe [file name] -n[line number] 把[file name] -…

上位机图像处理和嵌入式模块部署(自定义算法)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们在使用opencv的时候&#xff0c;虽然大部分算法都不需要我们自己重头开始编写&#xff0c;但是总有一些关于我们自己产品的know-how&#xff0…

控制项目风险

一、风险预算 暴雪公司经理艾莉森&#xff0c;暴雪公司是一家小型工业企业&#xff0c;该公司的高管为了降低生产成本&#xff0c;决定搬迁工厂。项目经理明白实际情况与初始计划之间常常会有很大的出入。项目经理需要事先为一些事情做好准备&#xff0c;并在项目运作或预算方面…

python报错:TypeError: ‘str‘ object is not callable

错误打印&#xff1a; python 代码&#xff1a; datalist [];datadictTmp (};mch 48;for i in range(1,10):datadict.clear()mch 48 ## 报错位置 datadict[parent_ID] str(i)chr(mch)mch 1datadict[paymentMethod] str(i)chr(mch)mch 1datadict[payer] str(i)chr(mc…

kafka入门(八):kafka分区分配策略

kafka分区分配策略 参数&#xff1a; Kafka提供了消费者客户端参数partition.assignment.strategy来设置消费者与订阅主题之间的分区分配策略。 默认情况下&#xff0c;此参数的值为 org.apache.kafka.clients.consumer.RangeAssignor&#xff0c;即采用RangeAssignor分配策略…

【服务器】安装宝塔面板

目录 &#x1f33a;【前言】 &#x1f33c;【前提】连接服务器 &#x1f337;方式一 使用工具登录服务器如Xshell &#x1f337;方式二 阿里云直接连接 &#x1f33c; 1. 安装宝塔 &#x1f337;获取安装脚本 方式一 使用下面提供的脚本安装 方式二 使用官网提供的脚本…

notepad++ v8.5.3 安装插件,安装失败怎么处理?下载进度为0怎么处理?

notepad v8.5.3 安装插件&#xff0c;安装失败&#xff1f;下载进度为0&#xff0c;怎么处理&#xff1f; 安装 进度 进度条没有进度 &#xff0c;然后就退出了&#xff0c;自动打开程序&#xff0c;不知道什么问题&#xff0c;插件管理下面也没有插件显示 找到问题了&#x…

2024年最全春节攻略,外贸人看这一篇就够了

凡事预则立&#xff0c;不预则废--《礼记•中庸》 不知不觉春节将至&#xff0c;很多外贸公司以及工厂也都公布了放假时间&#xff0c;虽然放假时间有长有短。很多人应该都有点迫不及待想要快点放假&#xff0c;回家过春节。春节毕竟是我们每年最重大的节日&#xff0c;也是家…

梯度下降算法实现原理

文章目录 什么是梯度梯度下降算法(通过迭代解决目标函数最小值)代码实现拓展: 什么是梯度 在了解梯度之前,我们先了解一下导数: 用于描述曲线变换快慢的一个量,在几何意义上表示为函数的斜率,数学定义为: f ′ ( x ) lim ⁡ △ x → 0 f ( x △ x ) − f ( x ) △ x f(x) \…

【Python进阶编程】python编程高手常用的设计模式(持续更新中)

Python编程高手通常熟练运用各种设计模式&#xff0c;这些设计模式有助于提高代码的可维护性、可扩展性和重用性。 以下是一些Python编程高手常用的设计模式&#xff1a; 1.单例模式&#xff08;Singleton Pattern&#xff09; 确保一个类只有一个实例&#xff0c;并提供全局…

Taro框架如何抹平各端的差异

Taro 是一款开源的跨端统一开发框架&#xff0c;它通过以下方式来抹平各端&#xff08;如微信小程序、支付宝小程序、H5、React Native 等&#xff09;的差异&#xff1a; 统一的编程模型&#xff1a;Taro 提供了与 React 类似的编程模型&#xff0c;开发者可以使用 JSX 语法和…

幻兽帕鲁服务器搭建,包教包会

服务器搭建 幻兽帕鲁服务器搭建&#xff0c;包教包会&#xff0c;不会评论区评论手把手帮忙搭建 一、steamCMD安装 1、安装screen&#xff1a; yum install screen -y 2、切换用户&#xff1a; su -ls /bin/bash steam 3、切换至steam用户目录&#xff1a; cd ~ 4、下载ste…

CrawlSpider【获取当前访问链接的父链接和锚文本】代码逻辑

tip: 超链接对应的文案通常被称为“锚文本”&#xff08;anchor text&#xff09; 在继承CrawlSpider父类的前提下&#xff0c;编写一个 fetch_referer 方法获取当前response.url的父链接和锚文本。 实现逻辑&#xff0c;通过一个例子简要说明&#xff1a; 如果设置 start_…

快快销ShopMatrix 分销商城多端uniapp可编译5端 - 订单金额满多少,一次性订单金额满多少,充值多少升级

“订单金额满多少”或“一次性订单金额满多少”进行升级的商业逻辑。这种策略通常是为了激励用户增加消费额度、提高客单价或者提升用户的活跃度与忠诚度&#xff0c;具有以下好处&#xff1a; 刺激消费增长&#xff1a;商家设置一定的门槛&#xff0c;如一次性订单金额满300元…

C++基础语法和用法

文章目录 1.hello world2.引入namespace(命名空间/域问题)3.输入输出4.缺省参数/默认参数5.函数重载6.引用7.内联函数8.auto关键字&#xff0c;基于范围的for循环&#xff0c;空指针NULL8.1 auto8.2 基于范围的for循环8.3 nullptr 1.hello world #include <iostream> us…

世界经济论坛发布《2024年全球风险报告》和《2024年全球网络安全展望》:网络攻击是2024世界5大风险之一,网络安全经济增速是全球经济的四倍

在近日举行的世界经济论坛 (WEF)上&#xff0c;发布了《2024 年全球风险》报告和《2024年全球网络安全展望》两份重磅报告&#xff0c;分别揭示了全球经济今年和未来几年可能面临的一些关键风险和问题&#xff0c;以及网络安全与全球经济之间的逻辑关系。 2024年全球风险报告 今…