0

我正在使用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>

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

当前结果

4

1 回答 1

0

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

于 2021-01-12T16:59:40.590 回答