[Vue advance Cropper] 올린 이미지에 따라서 크로퍼 크기가 맞춰짐

문제

긴 이미지를 크로퍼에 넣으면, 크로퍼가 이미지 크기만큼 되버림.. 길면, 아래 버튼들이 잘림.

 

 

수정한 코드

<template>
  <div class="dim">
    <!-- 편집 모달 -->
    <main class="edit-ui">
      <div class="flex-center">
        <cropper
          :src="img"
          :stencil-props="cropOption"
          :minWidth="150"
          :minHeight="100"
          :resize-image="{
            adjustStencil: true,
          }"
          :default-size="defaultSize"
          class="cropper"
        />
      </div>
    </main>
  </div>
</template>

// ...

<style>
// 👇 요 코드로 해결함
.cropper {
  border: solid 1px #eee;
  min-height: 200px;
  max-height: 500px;
  width: 100%;
}
</style>

 

 

결과