在Uniapp中，我们可以使用image组件来加载图片，而想要实现图片宽度100%、高度自适应的效果，可以通过以下步骤实现：
首先，在image组件上设置mode属性为widthFix，表示按照图片的宽度等比缩放，并保证图片宽度为100%。
接着，在image组件上设置style属性，为图片设置高度自适应。可以使用CSS的height: auto属性来实现。文章来源地址https://www.toymoban.com/news/detail-557921.html
<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>
文章来源：https://www.toymoban.com/news/detail-557921.html
到了这里，关于Vue uniapp实现图片宽度100%、高度自适应的效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
