200926__CSS background image 비율 유지 확대

다음은 자바스크립트로 10장의 이미지를 랜덤으로 백그라운드 이미지로 넣어주는 상황이다.

따로 div를 생성하지 않고 바로 img 요소로 넣어주었다.

const body = document.querySelector('body');

const IMG_NUMBER = 10;

function paintImage(imgNumber) {
  const image = new Image();
  image.src = `images/${imgNumber + 1}.jpg`;
  image.classList.add('bgImage');
  body.appendChild(image);
}

function genRandom() {
  const number = Math.floor(Math.random() * IMG_NUMBER);
  return number;
}

function init() {
  const randomNumber = genRandom();
  paintImage(randomNumber);
}

init();

이런 상황에서 창에 크기에 맞춰 이미지가 확대되고 축소되지만, 비율은 유지하고 싶다면?

.bgImage {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  z-index: -1;
  animation: fadeIn 0.5s linear;
}

width와 height을 100%로 하여 실행하면 비율이 유지되지 않고 창의 크기에 맞춰 비율이 깨진다.

object-fit: cover; 부분이 핵심이다.