在Uniapp中，我們可以使用image組件來加載圖片，而想要實現(xiàn)圖片寬度100%、高度自適應(yīng)的效果，可以通過以下步驟實現(xiàn)：
首先，在image組件上設(shè)置mode屬性為widthFix，表示按照圖片的寬度等比縮放，并保證圖片寬度為100%。
接著，在image組件上設(shè)置style屬性，為圖片設(shè)置高度自適應(yīng)。可以使用CSS的height: auto屬性來實現(xiàn)。文章來源地址http://www.zghlxwxcb.cn/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) {
// 當(dāng)圖片加載完成后，獲取圖片的原始寬度和高度，并根據(jù)寬度計算出高度
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>
文章來源：http://www.zghlxwxcb.cn/news/detail-557921.html
到了這里，關(guān)于Vue uniapp實現(xiàn)圖片寬度100%、高度自適應(yīng)的效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
