前言

• 图片容器宽度已确定
• 图片加载后，将图片容器按照图片的宽高比设置高度

思路

• 图片容器宽度已确定。
• uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）。
• uni-app的image组件提供了@load事件。在@load事件中可以获得图片的宽、高。
• 获得图片的宽、高后，计算图片容器的高度。
• 使用内联样式，为图片容器设置图片高度。图片容器的宽高比与图片的宽高比一致。

操作步骤

1. image组件设置：mode设置为scaleToFill；内联样式设置图片高度

<div class="zbox" v-for="(item,index) in imageList" :key="index">
	<image :id="'img'+index" :src="item.url" mode="scaleToFill" class="cover_img" @load="imageLoad"
			:style="{height: item.containerHeight + 'px'}"></image>
</div>

2. s

<script>
	export default {
		components: {},
		data() {
			return {
				imageList: [], //图片列表
			}
		},

		onLoad(options) {
			this.loadImageList();
		},
		methods: {
			/* 调用接口，从服务器获取图片列表 */
			loadImageList: function() {
				var _this = this;
				uni.request({
					...
					success: function(res) {
						_this.imageList = res.data;
					},
					...
				});
			},
			imageLoad: function(e) {
				var _this = this;
				/* 图片容器的id */
				var id = e.currentTarget.id;
				/* 图片容器对应数组数据的索引 */
				var index = id.substr(3);
				/* 图片容器对应的数据 */
				var item = _this.imageList [index];

				/* 查询图片容器的宽度 */
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).boundingClientRect(data => {
					/* 计算图片容器的宽度 */
					item.containerHeight = data.width * e.detail.height / e.detail.width;
					/* 强制刷新。如不强制刷新，则图片容器高度不会改变 */
					_this.$forceUpdate();
				}).exec();
			}
		}
	}
</script>