Uniapp 微信小程序图片自适应固定盒子大小，防止变形

要让图片在固定盒子内不变形，可以使用以下方法来实现：

设置盒子的样式为position: relative;以及overflow: hidden;，确保盒子具有固定的大小并且超出部分被隐藏。
在盒子内创建一个子元素并设置为position: absolute;，并将其宽度和高度设置为100%以填充整个盒子。
在子元素内使用uni-image组件来展示图片，设置mode属性为aspectFit，这将确保图片在保持原始宽高比的情况下适应盒子的大小。

以下是示例代码：

<template>
  <view class='container'>
    <view class='box'>
      <view class='image-container'>
        <uni-image class='image' :src='imageUrl' mode='aspectFit'></uni-image>
      </view>
    </view>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: '图片地址'
    };
  }
};
</script>

在上述代码中，.box类定义了固定大小的盒子，.image-container类定义了一个绝对定位的子元素，.image类定义了图片元素的样式。通过设置uni-image组件的mode属性为aspectFit，图片将按比例缩放以适应盒子的大小，并且不会变形。你可以将imageUrl替换为你自己的图片地址。