uniapp中如何如何让图⽚宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变

在Uniapp中,你可以通过设置image标签的mode属性为"widthFix"来实现这个需求。这样设置后,图片的宽度将保持不变,高度将自动变化,同时保持原始的宽高比。

请注意,这里的image标签不是HTML中的img标签,而是Uniapp中的image组件。

示例代码如下:


在这个例子中,图片的宽度被设置为不变,高度则根据原始的宽高比自动调整。如果你想根据不同的屏幕宽度自适应显示,你还可以结合使用CSS媒体查询和计算属性动态调整图片的大小

例如,如果你有一个图片路径为/static/home/hotserve2.png,你可以这样设置:


以上代码表示图片的宽度将保持不变,高度将自动调整以保持原始的宽高比。

在 UniApp 中,你可以使用 CSS 来控制图片的宽度并使其高度自动调整,以保持原始的宽高比。以下是一个示例 CSS 样式,你可以将其应用到你的图片元素上:

css
.image-class {  
  width: 100%; /* 图片宽度设置为 100% */  
  height: auto; /* 图片高度自动调整 */  
}
在上面的样式中,将图片元素的类设置为 "image-class",这样你可以将样式应用到你的图片上。将 width 属性设置为 100%,这将使图片的宽度等于其容器的宽度。将 height 属性设置为 auto,这将使图片的高度自动调整,以保持原始的宽高比。

请确保将该样式添加到与图片相关的样式表或样式块中,以便将其应用于你的图片元素。

你可能感兴趣的:(uni-app)