uni-app实现发布动态图片排版效果

uni-app实现发布动态图片排版效果
如果是一张图片就随图片自适应，如果大于等于两张图片就限制大小，如图2，（限制大小后只展示中间内容，图片不能变形）
这种布局CSS怎么写？

可以动态绑定class 来实现 宽度的变化，
一个css 写 width:100%；
另一个写 width:33%；

然后 循环图片时 根据数组的length 来绑定不同的class

第二个方法 纯css ：

.image-container img{
              width: 33%;
            }
            .image-container img:nth-last-of-type(1):nth-of-type(1){
                width: auto;
            }

可以使用flex布局和object-fit属性来实现
使用flex布局可以实现动态排版效果。将图片容器设置为flex布局，可以让图片自适应容器大小，并实现多张图片的排版效果。

<view class="image-container">
  <image v-for="(item, index) in images" :key="index" :src="item" :style="imageStyle"></image>
</view>

data() {
  return {
    images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    imageStyle: {}
  };
},
mounted() {
  // 计算图片样式
  this.calculateImageStyle();
},
methods: {
  // 计算图片样式
  calculateImageStyle() {
    const imageContainer = this.$refs.imageContainer;
    const containerWidth = imageContainer.offsetWidth;
    const containerHeight = imageContainer.offsetHeight;
    const imageCount = this.images.length;
    let imageWidth, imageHeight;

    if (imageCount === 1) {
      // 如果只有一张图片，图片自适应容器大小
      const image = imageContainer.querySelector('image');
      imageWidth = image.naturalWidth;
      imageHeight = image.naturalHeight;
    } else {
      // 如果有多张图片，限制图片大小
      imageWidth = containerWidth / 2;
      imageHeight = containerHeight / 2;
    }

    // 设置图片样式
    this.imageStyle = {
      width: `${imageWidth}px`,
      height: `${imageHeight}px`,
      objectFit: 'cover'
    };