sizeToContain

원본 사이즈(sw, sh)의 비율을 유지 하면서, 컨테이너 사이즈(cw, ch) 내부에 들어갈 때 그려져야 하는 바운더리(dx, dy, dw, dh) 정보를 반환합니다.

css 의 object-fit/bakground-size contain 과 동일합니다.
dx, dy 는 음수가 나올 수 없습니다.
dw, dh 가 cw, ch 보다 클 수 없습니다.

sizeToContain(원본 width, 원본 height, 컨테이너 width, 컨테이너 height);

const img = { width: 100, height: 100 };
const box = { width: 200, height: 200 };
const draw = sizeToContain(img.width, img.height, box.width, box.height); 
// { dx: 50, dy: 50, dw: 100, dh: 100 }

img.top = draw.dy;
img.left = draw.dx;
img.width = draw.dw;
img.height = draw.dh;

const img = { width: 300, height: 200 };
const box = { width: 200, height: 200 };
const draw = sizeToContain(img.width, img.height, box.width, box.height); 
// { dx: 0, dy: 33.5, dw: 200, dh: 133 }

img.top = draw.dy;
img.left = draw.dx;
img.width = draw.dw;
img.height = draw.dh;

sizeToContain

original

vue

<template>
  <div>
    sizeToContain
    <div class="img-container">
      <img class="img-item" src="./bangw2.png" :style="styleImage" />
    </div>

    <br />
    original
    <img class="img-origin" src="./bangw2.png" />
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';
import { sizeToContain } from '@jood/helpdesk-point';

const { dx, dy, dw, dh } = sizeToContain(920, 1354, 200, 200);
const drawState = reactive({ dx, dy, dw, dh });

const styleImage = computed(() => {
  const { dx, dy, dw, dh } = drawState;
  return {
    top: `${dy}px`,
    left: `${dx}px`,
    width: `${dw}px`,
    height: `${dh}px`,
  };
});
</script>

<style lang="scss" scoped>
.img-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);

  .img-item {
    position: absolute;
    top: 0;
    left: 0;
  }
}
.img-origin {
  display: block;
  max-width: 320px;
}
</style>

sizeToContain ​

sizeToContain