526互联

css图片宽高不同，缩放图片，保持宽高，注意最外层的盒子要用display:inline-flex

发布时间 2023-10-28 17:01:45作者: 凿壁偷光，集思广益
   <div class="product">
            <Popover placement="right">
              <template #content>
                <div class="w-[200px] h-[200px]">
                  <img
                    :src="record?.mainImages?.[0]?.url"
                    class="w-full h-full object-scale-down"
                  />
                </div>
              </template>
              <div class="mr-[9px] w-[35px] h-[35px]">
                <img
                  :src="record?.mainImages?.[0]?.url"
                  class="cursor-pointer object-scale-down w-full h-full"
                />
              </div>
            </Popover>

            <div class="productText">
              <span>
                <a class="product_link" target="_blank" :href="record?.productLink">
                  <span class="productTitle">
                    {{ record?.productTitle }}
                  </span>
                </a>
              </span>
              <span class="copy_style">
                <Copy placement="right" :keyword="record?.id"> ASIN：{{ record?.id }} </Copy></span
              >
            </div>
          </div>






  .product {
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
    color: @primary-color !important;
  }
  .productText {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .product_link {
    color: @primary-color !important;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .productTitle {
    text-overflow: ellipsis;
    overflow: hidden;
  }