微信小程序-固定图片长宽比例


由于小程序无法设置本地资源 background

sat 03 2017 
O wxss 
https : / .weixin . . con/

可以先创建一个固定宽高比的容器,然后再内部添加一个image标签,设置

position: absolute;

topbottom0

. img{ 
width: Iøe%; 
height: 8; 
padding-bottom: 33.33%; 
position: relative; 
. img image{ 
width : 108%; height : 108%; 
position: absolute; 
top:e; 
bottom: 8;

(view data-docno="{{item. id}}" 
view class="img"> 
<image image}}" / > 
/ view> 
(view 
class="description"> 
(view class="gz-layout layoutl"> 
wx : for- " 
wx: key=" item. id 
(image class=" ico" src="/static/image/ico_date.png"></image> 
(view 
</view> 
(view class="gz-layout layoutl"> 
(image class="ico" src="/static/image/ico zhubanfang. png" 
fi : {{item.zhubanfang}}</view> 
(view 
</view> 
(view class="gz-layout layoutl"> 
(image class=" ico" src="/static/image/ico address.png" 
(view class="gz-layout-item"> 
</view> 
< / view> 
: 16rpx; " 
<vlew 
</view>

预览:

原始固定宽度比例
中 心 
五 折 活 动 疯 狂 进 行 中 
@ 活 时 河 : 201 g 一 05 一 1 4 
主 办 方 : 春 科 技 
@ 活 址 : 义 之 心 一 楼 中 心 
0 
五 折 活 动 疯 狂 进 行 中 
@ 活 时 河 : 201 g 一 05 一 1 4 
主 办 方 : 春 科 技 
@ 活 址 : 义 之 心 一 楼 
五 折 活 动 疯 狂 进 行 中 
活 时 河 : 201 g 一 05 一 1 4 
主 办 方 : 春 科 技 
@ 活 址 : 义 之 心 一 楼 
4

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
上一篇:SQL Server被防止木马记录,数据库病毒植入
下一篇:UI配色 颜色(色彩)搭配
评论列表

发表评论

评论内容
昵称:
关联文章

程序-固定图片比例
程序中换行,空格(多个空格)写法
AI聊天机器人总结,图灵、思知、爱、
支付官方相关工具下载
C#图片处理
JOC.Framework 程序uni-app添加全局水印
支付:JSAPI支付 开发手册
JS 接口签名校验工具 (qq.com)
支付,当面付,开发手册
支付接口签名校验工具
C#图片处理类:ImageLibrary
浏览器网页调试的几中方法
/支付宝 在线支付测试工具
支付:受理机构必须传入sub_mch_id
支付:Http头缺少Accept或User-Agent
支付:商户API私钥
支付提示 No_Auth 受理关系不存在
ASP.Net H5 OAuth2 认证 (前后端不分离)
Asp.net H5唤起支付和支付回调
支付:签名计算.net4.5

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码