En circunstancias normales, para hacer que la altura de la imagen cambie con el ancho, solo necesita configurar la altura sin darle la altura de la imagen, pero no en uniapp, esto es un dolor de cabeza.
<template>
<div class="banner">
<center>//center标签，使内容居中
<image src="/static/bg.jpg" alt="">
</center>
</div>
</template>
<style>
.banner image {
width: 95vw;
margin-top: 3vh;
}
</style>
En el código, le doy al ancho de la imagen el 95% del ancho del dispositivo, y la altura no está configurada. En circunstancias normales, la altura de la imagen cambiará con la adaptación del ancho, pero Uniapp no.
Se puede ver que la altura de la imagen es fija y obviamente se ha deformado. Luego, haga clic con el botón derecho en la imagen y verifique para encontrar esto. Debería ser la altura predeterminada establecida para la imagen cuando se compila Uniapp.
Solo cambia el código a lo siguiente
<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>
Luego, la imagen no se deformará y luego la ajustará de acuerdo con el estilo deseado.
