收藏
回答

微信小程序图片保持高度不变,宽度自适应缩放?

如何在保持图片高度不变的情况下,让宽度自适应缩放,注意:高度需要固定不变,请教各位大神

回答关注问题邀请回答
收藏

8 个回答

  • swordman
    swordman
    2021-08-27

    图片高度固定,宽度根据图片宽高比撑开,设置如下:设置固定height,mode: heightFix,不设置width, 即可。



    2021-08-27
    有用 3
    回复
  • 思男
    思男
    2019-08-05

    直接设置高度的值就可以了 宽度auto


    或者image组件有mode属性



    2019-08-05
    有用 2
    回复
  • 等
    2020-08-30

       <view id="iimgg">

                  <image mode="aspectFit" src="{{shopGood.listPicUrl}}" bindtap="toDetail"></image>

                  </view>

    #iimgg{

     display:flex;   

     justify-content: center;   

    }


    .goods-list image {


      height: 340rpx;


    }



    2020-08-30
    有用 1
    回复
  • momo
    momo
    2020-03-13

    确实,只有设置成背景图片可以解决

     width: 100%;
     background-size: auto 100%;
     background-repeat: no-repeat;
    
    2020-03-13
    有用
    回复 1
    • 这是一个名字
      这是一个名字
      2021-11-23
      背景实现的时候圆角没法控制
      2021-11-23
      回复
  • 夏虫语冰
    夏虫语冰
    2019-08-07

    你可以把 有颜色部分当成 背景底色, 文字部分 独立出来就可以了。

    <view class="image">红方一注</view>


    注:底图部分记得去掉文字内容

    2019-08-07
    有用
    回复 4
    • Violet evegarden
      Violet evegarden
      2019-08-07
      是的,已经解决了,谢谢了
      2019-08-07
      回复
    • 夏虫语冰
      夏虫语冰
      2019-08-07
      好的
      2019-08-07
      回复
    • 一星小兵🍄
      一星小兵🍄
      2020-02-22
      看来做成背景图是唯一解决办法?
      2020-02-22
      回复
    • Pursuit
      Pursuit
      2020-08-28回复Violet evegarden
      怎么解决的,我也碰到这种问题了
      2020-08-28
      回复
  • 刘汝佳
    刘汝佳
    2019-08-05

    bindload 获取图片的宽高,然后比例自己算


    2019-08-05
    有用
    回复 2
    • Violet evegarden
      Violet evegarden
      2019-08-05
      这样会将图片的高度也进行改变呀
      2019-08-05
      回复
    • 刘汝佳
      刘汝佳
      2019-08-06
      假如你图片的高是8宽是4,你需要图片高是4,那你就可以同过计算比例算出宽是2,然后 你就可以写出图片的高是4,宽是2
      2019-08-06
      回复
  • Violet evegarden
    Violet evegarden
    2019-08-05


    2019-08-05
    有用
    回复 4
    • Violet evegarden
      Violet evegarden
      2019-08-05
      也试过了,都是宽度可以了,但是高度就变形了
      2019-08-05
      回复
    • 思男
      思男
      2019-08-05
      啊,你这是整个红色部分是一个图片吗,你这样等于拉伸了呀,拉伸了肯定会变形的。
      2019-08-05
      回复
    • Violet evegarden
      Violet evegarden
      2019-08-05回复思男
      是,实在不行只好更换图片了,十分感谢
      2019-08-05
      回复
    • 思男
      思男
      2019-08-05回复Violet evegarden
      你只要是图片,进行单方拉伸都会变得,你可以换一种方案,比如你想实现右侧的斜角不变形,完全可以用css实现,真的想用图片,可以选择拼接一下,左侧内容部分宽度可变化是view,右侧一点点放一个图 固定宽高即可。这样内容只会撑开view,图片永远会往右顶,不会变形。但是推荐直接用css画一下这个斜角。
      2019-08-05
      1
      回复
  • 祺爸💎
    祺爸💎
    2019-08-05

    宽度%,高度px

    2019-08-05
    有用
    回复 7
    • Violet evegarden
      Violet evegarden
      2019-08-05
      但是图片会变形
      2019-08-05
      回复
    • Violet evegarden
      Violet evegarden
      2019-08-05
      图片右边的边 会有变形
      2019-08-05
      回复
    • 祺爸💎
      祺爸💎
      2019-08-05回复Violet evegarden
      mode试一下
      2019-08-05
      回复
    • Violet evegarden
      Violet evegarden
      2019-08-05
      也试过了,都是宽度可以,但是高度会变形
      2019-08-05
      回复
    • 祺爸💎
      祺爸💎
      2019-08-05回复Violet evegarden
      aspectFit或者aspectFill
      2019-08-05
      回复
    查看更多(2)
登录 后发表内容