需求1: 要求在一行中显示多张图片,父容器有定宽,当子元素到达一定数量的时候缩小宽度以至于可以在父容器中展示

解决方案: 使用flex布局 代码如下

.img {
      margin-right: 5px;
      margin-bottom: 5px;
      max-height: 131px;
      width: auto;
      max-width: 232px;
      img {
        max-height: 131px;//图片过高限制高度
        max-width: 100%;
      }
    }

经过测试,img无法通过样式控制宽度自动变化,只能在最外层套个div进行动态缩放,效果就是,如果图片过长,则限制宽度最大为232px,高度最大131px,当图片过多则宽度进行缩放,高度成比例缩放

需求2: 纵向实现类似效果,父容器高度固定,自元素不得超过父元素,数量多的情况,自动缩放高度

经过测试,通过flex-direction和无法实现这个效果,子元素如果只是img或者在div中套img都会出现高度超出父容器的情况,子元素的高度不会进行缩放,经过尝试,只能通过img外层套div,将img置于浮动状态,使子元素高度无法撑起父元素,并将高度设置为父元素的高度,依次来达到动态缩放,代码如下:

结构如下:

 <div class="covers"
        :data-audit="`covers-${qipuId}`">
 	<div class="img">
          <img :src="firstPic"
            v-if="firstPic && showScreenShot"
            class="firstPic"
            :onerror="errorPic"
            :data-src="firstPic"
            @click="showPic(firstPic)"
            alt="首帧图">
        </div>
</div>

.covers {
      width: calc(100% - 350px);
      max-height: 425px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .img {
        max-width: 183px;
        height: 142px;
        overflow: auto;
        margin-bottom: 2px;
        img {
          float: left;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }