zoukankan      html  css  js  c++  java
  • uni.app图片同比例缩放

    uni.app图片同比例缩放
    图片同比例缩放是经常用到的,刚开始设置了什么max-width、object-fit都不行,最后才知道uni.app里自带的mode属性可以解决这个问题,真是方便了很多。
    aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取
    aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    widthFix:宽度不变,高度自动变化,保持原图宽高比不变

    <view class="orgimg">
       <image src="../../../static/timg%5B3%5D.jpg" mode="aspectFill" ></image>
      </view>
    //css部分
    <style lang="scss">
    .orgimg {
      500upx;
     height: 500upx;
    }
    </style>```
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418162142414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTUxNDc0,size_16,color_FFFFFF,t_70)
  • 相关阅读:
    LAMP动态网站安装脚本
    图片上传
    如何用qq代理发送邮件
    初识c#
    Eclipse使用技巧
    maven中 install的install:install的区别
    Git的各种状态
    phpStorm中Structure窗口中的符号代表的意思
    Apache+PHP+MySQL+phpMyAdmin+WordPress搭建
    Session重点整理
  • 原文地址:https://www.cnblogs.com/li-sir/p/12159654.html
Copyright © 2011-2022 走看看