如何让图片宽度不变，高度自动变化，保持原图宽高比不变

如何让图片宽度不变，高度自动变化，保持原图宽高比不变：

<template>
  <view>
    <image :src="imageUrl" class="responsive-image" />
  </view>
</template>

<style>
.responsive-image {
  max-width: 100%;
  height: auto;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: "https://example.com/image.jpg"
    };
  }
};
</script>

在上述代码中，我们使用image标签来显示图片，并为其添加了一个名为responsive-image的类。在CSS样式中，我们设置了.responsive-image的max-width属性为100%，这会使得图片的宽度不超过其容器的宽度，从而保持宽度不变。同时，我们设置了height属性为auto，这会根据原图的宽高比自动计算出图片的高度，以保持图片的比例不变。

通过以上代码，您可以实现让图片宽度不变，高度自动变化，并保持原图宽高比不变的效果。