uniapp中如何如何让图⽚宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变_uni-app中css中设置img图片不变形

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

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

示例代码如下：

<image class="contentAimg" src="/static/home/hotserve2.png" mode="widthFix"/>
在这个例子中，图片的宽度被设置为不变，高度则根据原始的宽高比自动调整。如果你想根据不同的屏幕宽度自适应显示，你还可以结合使用CSS媒体查询和计算属性动态调整图片的大小

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

<image src="/static/home/hotserve2.png" mode="widthFix"/>
以上代码表示图片的宽度将保持不变，高度将自动调整以保持原始的宽高比。

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

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

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