uniappはどのようにして画像の幅を変更し、高さも変更しますか

通常の状況では、幅に応じて画像の高さを変更するには、画像の高さを指定せずに高さを設定するだけで済みますが、Uniappではそうではありません。これは頭痛の種です。

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

コードでは、画像の幅をデバイス幅の 95% に設定し、高さは設定していません。通常の状況では、画像の高さは幅の適応に応じて変更されますが、uniapp では変更されません。

 

 画像の高さが固定されており、明らかに変形していることがわかります。画像を右クリックして確認すると、uniapp のコンパイル時に画像に設定されたデフォルトの高さになっているはずです。

 コードを次のように変更するだけです

<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>

 その後、画像は変形せず、希望のスタイルに応じて微調整します。