zoukankan      html  css  js  c++  java
  • 图片展示方法总结

    展示图片的方法一般有两种:

    1.css 通过background属性加载图片(适用于本地图片);

    .img {
    100px;
    height: 100px;
    background: url('./test.png');
    background-size: 100%;
    }
    html片段: 
    <div class="img"></div>
    微信小程序wxml片段:<view class="img"></view>

    2.专用图片标签展示(适用于本地、线上);

    h5: <img src="./test.png"></img>
    微信小程序:<image src="./test.png" />

    PS:

    1. css方法:

    h5和微信小程序如果不设置高度,图片不显示;如果只设置高度,宽度按100%显示。

    2.专用标签:

    • h5,不做宽高设置,默认显示图片的原始宽高,若只设置宽度,高度自适应;若只设置高度,展示图片原始宽高;
    • 微信小程序: 

    若不设置图片宽高,默认按mode="scaleToFill"处理,图片会填充整个image默认宽高;

    若只设置宽度/高度,默认mode值不改变,高度/宽度为image默认高度/宽度;

    若要保持宽度不变、高度自适应,则应给定一个宽度值并将mode值改为‘widthFix’;

  • 相关阅读:
    反汇编测试20191325
    20191325mystat
    20191325学习笔记8
    20191325学习笔记7
    2.3.1测试 20191325
    20191214-改进ls
    团队作业4
    20191214-反汇编测试
    stat命令的实现-mysate(必做)
    图片
  • 原文地址:https://www.cnblogs.com/ganmy/p/8474732.html
Copyright © 2011-2022 走看看