Comment uniapp fait-il changer la largeur de l'image et la hauteur aussi

Dans des circonstances normales, pour faire changer la hauteur de l'image avec la largeur, il suffit de régler la hauteur sans donner la hauteur de l'image, mais pas dans uniapp, c'est un casse-tête

<template>
	<div class="banner">
		<center>//center标签，使内容居中
			<image src="/static/bg.jpg" alt="">
		</center>
	</div>
</template>
<style>
	.banner image {
		width: 95vw;
		margin-top: 3vh;
	}
</style>

Dans le code, je donne à la largeur de l'image 95 % de la largeur de l'appareil et la hauteur n'est pas définie. Normalement, la hauteur de l'image changera avec l'adaptation de la largeur, mais uniapp n'est pas

 

 On peut voir que la hauteur de l'image est fixe et a été manifestement déformée. Ensuite, cliquez avec le bouton droit sur l'image et vérifiez pour le trouver. Il devrait s'agir de la hauteur par défaut définie pour l'image lors de la compilation d'uniapp.

 Changez simplement le code comme suit

<template>
	<div class="banner">
		<center>//center标签，使内容居中
			<image src="/static/bg.jpg" alt="">
		</center>
	</div>
</template>
<style>
	//.banner image {
	//	width: 95vw;
	//	margin-top: 3vh;
	//}
	.banner {
		margin-top: 3vw;
		width: 100%;
		height: 0;
		padding-bottom: 70%;
		/*根据图片宽高比计算出的高度占比*/
		position: relative;
		overflow: hidden;
		/* 防止单独设置 paddingBottom 值的情况下，图片超出容器造成的影响 */
	}

	.banner image {
		position: absolute;
		left: 0;
		/*防止图片超出容器影响布局*/
		width: 100%;
		height: 100%;
		object-fit: contain;
		/*根据图片本身宽高比自适应*/
	}
</style>

 Ensuite, l'image ne sera pas déformée, puis ajustez-la en fonction du style souhaité.