Vue를 사용하여 외부 이미지를 조정하는 구성 요소

아래와 같이 그림을 결정할 사이즈 (이번이라면 정사각형) 로 표시하려는 tips입니다.
서버 측에서 이미지를 생성하는 것이 아니라 어떤 이미지 사이즈가 나올지 모르는 상황에서 프론트에서 실시할 상황을 구상한다.

참조: [롯데마트] 과자(디저트·과자)의 우편 구매

위의 가로로 긴 이미지를 정사각형으로 만들려면 이렇게 됩니다.
sample.css

/* 通常 */
.sample__img {
  width: 400px;
  height: 400px;
}
/* 外接リサイズ */
.sample__fit-img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

width와height만 지정하면 이미지가 변형됩니다.
상기 object-fit: cover 와 같이 한 번에 외접 사이즈를 실현할 수 있다.
단지 대응하는 브라우저가 일부일 뿐이다.

브라우저를 더욱 대응하고 싶어요!이럴 때 쓴다background-size: cover.

sample.html

<div class="sample__fit-img"></div>

sample.css

.sample__fit-img {
  background-image: url(https://cdn.pixabay.com/photo/2019/05/12/20/45/cat-4199084_960_720.jpg)
  background-size: cover; /* 外接リサイズ */
  background-repeat: no-repeat; /* リピートするか */
  background-position: center; /* 位置 */
}

참고로 상술한 설치라면 배경 이미지로 간주됩니다
인쇄하고 싶어도 표시되지 않으니 주의하세요.브라우저를 사용해서 대응하는 것입니다. 어느 쪽은...!
이곳에서 같은 토론을 진행하니 매우 재미있다.
* How do I prevent the error "Index signature of object type implicitly has an 'any' type" when compiling typescript with noImplicitAny flag enabled? - Stack Overflow

또한(Vue에서 IE를 위한 외부 치수용 어셈블리 제작)

ObjectFitImg.vue

<template>
  <div :style="style" class="object-fit-img">
    <span v-if="alt" class="object-fit-img__alt">{{ alt }}</span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

interface ObjectFitStyle {
  width: string;
  height: string;
  'background-image': string;
  [key: string]: string | null;
}

@Component
export default class ObjectFitImg extends Vue {
  @Prop({ required: true }) readonly src!: string;
  @Prop({ required: true }) readonly alt!: string;
  @Prop({ default: null }) readonly width!: string;
  @Prop({ default: null }) readonly height!: string;

  get style(): ObjectFitStyle {
    const style: ObjectFitStyle = {
      width: '',
      height: '',
      'background-image': ''
    };

    style.width = this.width ? `${this.width}px` : '';
    style.height = this.height ? `${this.height}px` : '';
    style['background-image'] = `url(${this.src})`;

    return style;
  }
}
</script>

<style lang="scss" scoped>
.object-fit-img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  &__alt {
    visibility: hidden;
  }
}
</style>

여기까지 쓰고 저는 개인적으로 IEobject-fit: cover를 버렸으면 좋겠어요.