实现图片宽度100%、高度自适应的效果,通过以下步骤实现:
1.在image组件上设置mode属性为widthFix,表示按照图片的宽度等比缩放,并保证图片宽度为100%。
2.在image组件上设置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>

实践

	<!-- 我要入驻 -->
		<view class="settleIn" @click="goto('/pages/business/settleIn/settleIn')">
			<image class="img" mode="widthFix" :src="settleInImageSrc" :style="{ height: imgHeight + 'px' }"
				@load="onImgLoad" />
		</view>
data(){
    return:{
        // 申请入驻图片
				settleInImageSrc: "",
				imgHeight: 0,
    }
}
methods:{
        // 图片自适应
			onImgLoad(e) {
				// 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
				const {
					width,
					height
				} = e.mp.detail;
				this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
			},
    
}
	.settleIn {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 100%;
	}

效果

 

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐