WXOPEN Club

image mode="widthFix"加上边框失去比例

发布于 8 年前作者 fcheng6643 次浏览最后编辑 8 年前来自 ask

1.选一张正方形的图
2.使用image 组件，用上mode=“widthFix” 宽度可设成20% 或是150rpx
这个时候显示成为正方形
3.再加上样式

border-radius: 50%;
border:3px solid #fff;

这个时候，图片就失去比例了，不再是正方形。

1 回复
likong
likong1 楼6 年前

附暂时性的解决方案：

1.用js拿到适合的宽度

Page({
  data: {
    logoWidth:''
  },
  onLoad: function () {
    var that = this;
    //拿到屏幕宽度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          logoWidth: res.windowWidth * 0.15
        });
      }
    });
  }
});

2.然后写死样式

<image class="coupon-logo" src="logo.png" style="width:{{logoWidth}}px;height:{{logoWidth}}px;"/>