Best way to handle various sizes of images in ImageKit

Question

I'm using ImageKit to store images for my portfolio (more specifically, I'm using their Vue SDK. Typically my images are horizontal/landscape, however I just added a few that are vertical orientation. What I'd like to do is force crop the vertical images so that they are the same dimensions as the horizontal images. Does anybody have any experience with this?

<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>

Current result: *I'd like the top row to be force cropped to the same dimensions as the bottom row.

Answer 1

You can use the <ik-image> component of Imagekit Vue SDK to set the same height and width for all of your images like this - <ik-image :src="your_image_src" :transformation="[{ height: 300, width: 400 }]" /> (assuming you have installed Imagekit plugin using Vue.use and specified required parameters there)