반응형 이미지 배너: 화면 가운데 / 가로로만 가운데에 위치 1가지

반응형 이미지 설정을 정리해 보려 합니다. 오늘 알아 볼 것은 화면 정 가운데 위치 시키는 것과 그냥 가로로만 가운데 위치 시키는 방법 입니다.

반응형 이미지 배너: 화면 정 중앙 위치

.responsive-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 필요에 따라 조정 가능 */
    padding: 20px; /* 이미지와 화면 테두리 사이 여백 */
    box-sizing: border-box;
}

.responsive-image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

<div class="responsive-image-container">
    <img src="https://giftzone.co.kr/banner/panchok-info-banner.png" alt="Panchok Info Banner">
</div>

.container {
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center;    /* 수직 가운데 정렬 */
    height: 100vh;         /* 전체 화면 높이 */
}

.image {
    max-width: 100%;       /* 반응형 이미지 */
    height: auto;          /* 비율 유지 */
}

<div class="container">
    <img src="image.jpg" alt="Image" class="image">
</div>

가로 중앙 정렬

.image {
    display: block;       /* 블록 요소로 설정 */
    margin: 0 auto;      /* 수평 가운데 정렬 */
    max-width: 100%;     /* 반응형 이미지 */
    height: auto;        /* 비율 유지 */
}

<img src="image.jpg" alt="Image" class="image">

.responsive-image-container {
    display: flex;
    justify-content: center; /* 가로로 가운데 정렬 */
    padding: 20px; /* 이미지와 화면 테두리 사이 여백 */
    box-sizing: border-box;
}

.responsive-image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

<div class="responsive-image-container">
    <img src="https://giftzone.co.kr/banner/panchok-info-banner.png" alt="Panchok Info Banner">
</div>

위 글은 블로그의 ‘Web‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.