CSS로 이미지 비율 유지하기

개인 프로젝트를 진행하는 도중, 이미지가 완전히 로드되기 전에 이미지 영역이 빈 상태로 남아 있어 레이아웃이 잠시 동안 무너지는 문제가 발생하였습니다.

이를 방지하기 위해, 단순히 <img> 태그에 이미지만 넣는 것이 아니라, 이미지가 로드되기 전에도 일정한 영역을 차지하도록 설정하여 레이아웃을 안정적으로 유지할 수 있도록 하였습니다.

<div className={styles['img-container']}>
    <img
        className={styles.img}
        src={thumbnails.medium.url}
        alt={title}
    />
</div>

.img-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 비율을 유지 */
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
}

.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

img-container 클래스는 이미지가 로드되기 전에 영역을 확보하기 위해 설정되었습니다.

padding-top: 56.25%는 16:9 비율을 유지하면서 컨테이너의 높이를 설정해 줍니다.

background-color 속성으로 배경색을 설정해, 이미지가 로드되기 전에도 일정한 색상으로 영역을 표시합니다.

 

img 클래스는 이미지를 컨테이너에 맞추어 렌더링하기 위한 설정입니다.

position: absolute와 object-fit: cover를 사용해 이미지가 컨테이너를 가득 채우도록 했습니다.

이렇게 하면 이미지가 로드되기 전에도 컨테이너의 모양이 유지되면서, 로드 후 자연스럽게 이미지를 표시할 수 있습니다.

 

비율을 계산할 때 16:9 비율을 적용하고 싶다면, 9를 16으로 나눈 값을 너비에 곱하면 됩니다.

예를 들어, 너비가 50%일 때 9:16 비율을 적용하려면 9 / 16 * 50을 계산하여 28.125가 됩니다. 다른 비율도 동일한 방식으로 계산할 수 있습니다.