CSS width:height 1:1 비율 맞추기

CSS에서 요소의 가로세로 비율을 1:1(정사각형)로 유지하는 방법입니다. 반응형 이미지, 프로필 썸네일, 그리드 아이템 등에서 자주 사용됩니다.

언제 사용하나요?

  • 프로필 이미지 정사각형 유지
  • 제품 썸네일 갤러리
  • 반응형 그리드 카드
  • 아이콘/로고 정렬

방법 1: aspect-ratio 속성 (권장)

<style>
/* 가장 간단한 방법 (최신 브라우저) */
.square {
    width: 100%;
    aspect-ratio: 1 / 1;  /* 가로:세로 = 1:1 */
    background: #3498db;
}

/* 다른 비율도 가능 */
.widescreen {
    aspect-ratio: 16 / 9;
}

.portrait {
    aspect-ratio: 3 / 4;
}

/* 이미지에 적용 */
.square-img {
    width: 200px;
    aspect-ratio: 1;
    object-fit: cover;  /* 비율 유지하며 채우기 */
}
</style>

<div class="square"></div>
<img class="square-img" src="photo.jpg" alt="썸네일">

방법 2: padding-top 트릭 (호환성)

<style>
/* 부모 요소 */
.square-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;  /* 가로 100% = 세로 100% */
}

/* 실제 콘텐츠 */
.square-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* 다른 비율 */
.ratio-16-9 {
    padding-top: 56.25%;  /* 9/16 * 100 = 56.25% */
}

.ratio-4-3 {
    padding-top: 75%;  /* 3/4 * 100 = 75% */
}
</style>

<div class="square-wrapper">
    <div class="content">
        <img src="photo.jpg" alt="">
    </div>
</div>

방법 3: vw 단위 사용

<style>
/* 뷰포트 기준 정사각형 */
.square {
    width: 50vw;
    height: 50vw;  /* 가로와 같은 vw 값 */
}

/* 그리드 아이템에 적용 */
.grid-item {
    width: calc(33.333% - 10px);
    height: 0;
    padding-bottom: calc(33.333% - 10px);
}
</style>

이미지 1:1 맞추기

<style>
/* 이미지 컨테이너 */
.img-square {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

/* 이미지 채우기 */
.img-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 비율 유지, 넘치면 자르기 */
    object-position: center;  /* 중앙 정렬 */
}

/* object-fit 옵션 */
img {
    object-fit: cover;    /* 꽉 채우기 (잘림) */
    object-fit: contain;  /* 전체 보이기 (여백) */
    object-fit: fill;     /* 늘려서 채우기 (비율 무시) */
}
</style>

<div class="img-square">
    <img src="landscape.jpg" alt="가로 이미지도 정사각형으로">
</div>

프로필 이미지 원형

<style>
.avatar {
    width: 100px;
    height: 100px;  /* 또는 aspect-ratio: 1 */
    border-radius: 50%;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

<div class="avatar">
    <img src="profile.jpg" alt="프로필">
</div>

반응형 갤러리 그리드

<style>
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<div class="gallery">
    <div class="gallery-item"><img src="1.jpg"></div>
    <div class="gallery-item"><img src="2.jpg"></div>
    <div class="gallery-item"><img src="3.jpg"></div>
</div>

브라우저 지원

방법지원
aspect-ratioChrome 88+, Firefox 89+, Safari 15+
padding-top 트릭모든 브라우저
object-fitIE 제외 모든 브라우저

폴백 처리

<style>
.square {
    /* 폴백 */
    padding-top: 100%;
    
    /* 지원 시 덮어쓰기 */
    @supports (aspect-ratio: 1) {
        padding-top: 0;
        aspect-ratio: 1;
    }
}
</style>