Vue uniappは画像の幅100%と高さの適応の効果を実現します

Uniapp では、画像コンポーネントを使用して画像をロードできます。画像の幅 100% と高さの自己適応の効果を実現するには、次の手順で実現できます。 まず、画像コンポーネントの mode 属性を widthFix に設定します。 、つまり、画像に従って
幅が比例して拡大縮小され、画像の幅が 100% であることが保証されます。
次に、画像コンポーネントに style 属性を設定して、適応性の高い画像を設定します。これは、CSS の height: auto プロパティを使用して実現できます。

<template>
  <view class="container">
    <image class="img" mode="widthFix" :src="imageUrl" :style="{ height: imgHeight + 'px' }" @load="onImgLoad" />
  </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      imageUrl: 'https://picsum.photos/400/300',
      imgHeight: 0,
    };
  },
  methods: {
    
    
    onImgLoad(e) {
    
    
      // 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
      const {
    
     width, height } = e.mp.detail;
      this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
    },
  },
};
</script>

<style>
.container {
    
    
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img {
    
    
  width: 100%;
}
</style>