在 ImageKit 中处理各种尺寸图像的最佳方法答案

【问题标题】：Best way to handle various sizes of images in ImageKit在 ImageKit 中处理各种尺寸图像的最佳方法
【发布时间】：2021-01-13 00:59:40
【问题描述】：

我使用ImageKit 存储我的作品集的图像（更具体地说，我使用他们的Vue SDK。通常我的图像是水平/横向的，但是我只是添加了一些垂直方向的图像。我'想做的是强制裁剪垂直图像，使它们与水平图像的尺寸相同。有人有这方面的经验吗？

<template>
  <client-only>
    <v-col
      cols="12"
      sm="6"
      md="6"
      lg="4"
      xl="3">
      <v-card
        class="image-card"
        flat
        nuxt
        :ripple="false"
        :to="imageLink">
        <div class="overlay">
          <h3
            class="display-2 text--white gallery-name">
            {{ item.title }}
          </h3>
          <div class="btn-wrapper">
            <v-btn
              depressed
              :ripple="false"
              color="primary"
              class="visit-btn"
              :to="imageLink">
              {{ btnText }}
            </v-btn>
          </div>
        </div>

        <i-k-image
          :public-key="publicKey"
          :url-endpoint="urlEndpoint"
          :src="imageSrc"
          :transformation="[
            { progressive: true },
            { cropMode: 'maintain_ratio' },
            { width: '500' },
          ]"
          @contextmenu.prevent />
      </v-card>
    </v-col>
  </client-only>
</template>

<style lang="scss" scoped>
  .image-card {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    height: 100%;
    margin: 0 auto;
    position: relative;

    .overlay {
      align-items: center;
      background-color: rgba(255, 255, 255, 0.3);
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: 0.2s all ease-in-out;
      visibility: hidden;
    }
    
    img.ik-image {
      width: 100%;
    }
  }
</style>

当前结果： *我希望将顶行强制裁剪为与底行相同的尺寸。

【问题讨论】：

标签： vue.js nuxt.js imagekit

【解决方案1】：

您可以使用 Imagekit Vue SDK 的 <ik-image> 组件为您的所有图像设置相同的高度和宽度，如下所示 - <ik-image :src="your_image_src" :transformation="[{ height: 300, width: 400 }]" />（假设你已经使用 Vue.use 安装了 Imagekit 插件并在那里指定了所需的参数）

【讨论】：