zoukankan      html  css  js  c++  java
  • 微信小程序 --- 图片自适应、本地图片的使用

    1、关于图片自适应

    image标签中添加mode属性:

    默认值:scaleToFill  ----  不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签

    aspectFit  ----  保持纵横比例缩放图片,使图片的长边能够完全显示出来,也就说图片可以完整的显示出来

    aspectFill  ----- 保持纵横比例缩放图片,只保证图片的短边能够完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取

    top  ----  不缩放图片,只显示图片的顶部区域

    bottom  ----  不缩放图片,只显示图片的底部区域

    center  ----  不缩放图片,只显示图片的中间区域

    left  ----  不缩放图片,只显示图片的左边区域

    right  -----   不缩放图片,只显示图片的右边区域

    top left   ----  不缩放图片,只显示图片的左上边区域

    top right  ----  不缩放图片,只显示图片的右上边区域

    bottom left   ----  不缩放图片,只显示图片的左下边区域

    bottom right  ----  不缩放图片,只显示图片的右下边区域

    2、关于图片引用

    在wxss页面中不能引用本地的图片

    解决方案:

    1、要是希望在wxss文件中使用背景图,我们可以使用网络图片,或者base64位的图片

    2、通常情况下在CSS文件中我们是没有办法拿到后台返回的域名,然后我们又希望可以使用一些本地的小图标之类的,我们可以在wxml中使用背景图,直接在view的style中写样式

      例如:

    3、在页面中直接使用image标签,然后使用绝对定位

  • 相关阅读:
    BZOJ 2154 Crash的数字表格 【莫比乌斯反演】
    BZOJ 3529 [Sdoi2014]数表 【莫比乌斯反演】
    BZOJ 2820 YY的GCD 【莫比乌斯反演】
    BZOJ 2440 [中山市选2011]完全平方数 【莫比乌斯反演】
    [BalticOI 2004] Sequence
    AtCoder [ARC070E] NarrowRectangles
    AtCoder [AGC022E] Median Replace
    AtCoder [ARC101E] Ribbons on Tree
    CF107D Crime Management
    Loj 6497「雅礼集训 2018 Day1」图
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/6879240.html
Copyright © 2011-2022 走看看