设置图片宽高,宽度100%高度按比例自动占满

让图片按5:4d的宽高比展示,padding-top=100%则表示按1:1按照当前的宽度自动设置和宽度相等的高度

<view class="shop_tu">
                    <image class="tu_tag" v-if="product.labourType == 2" src="../../static/tag/fu.svg" mode=""></image>
                    <image class="tu_tag" v-if="product.labourType == 3" src="../../static/tag/yin.svg" mode=""></image>
                    <image
                      class="thumb_img"
                      :src="aaa"
                      lazy-load
                      :lazy-load-margin="0"
                      mode="widthFix"
                    >
                    </image>
                  </view>

.shop_tu {
            flex-shrink: 0;
            position: relative;
            width: 100%;
            overflow: hidden;
            border-top-left-radius: 12rpx;
            border-top-right-radius: 12rpx;
            &::before{
              content: "";
              display: block;
              padding-top: 80%;
            }
            .thumb_img{
              position: absolute;
              left:0;
              top:-30rpx;
              width:100%;
              height:auto;
              border-top-left-radius: 12rpx;
              border-top-right-radius: 12rpx;
            }
          }