이미지를 DIV 가로, 세로에 대해 가운데 위치시키는 방법

WEB개발이야기/웹퍼블리싱

이미지를 DIV 가로, 세로에 대해 가운데 위치시키는 방법

어쩌다보니여기까지~ 2019. 10. 2. 18:46

예전에 이미지를 정해진 크기의 DIV의 가로, 세로 기준으로 중앙으로 정렬시키는 방법에 대해 포스팅한 적이 있습니다.

원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기

이 방법보다 더 쉽고 간단한 방법을 찾아내어 다시 포스팅을 합니다.
background image의 cover을 활용하는 방법입니다.

HTML 구성

먼저 HTML로 구성해야 하는 코드입니다.
이미지를 감싸고 있는 DIV를 통해서 나와야 할 이미지의 크기를 설정하시면 됩니다. 그러면 이미지가 그 크기에 맞게 중앙 정렬이 됩니다.

<div style="width:150px;height:300px">
    <img src='http://unsplash.it/300/800?random' class="js-imgSizeSame" alt='' />
</div>

<div style="width:150p... : 크기를 지정하는 DIV로 javascript에 의해 변경되지는 않습니다. 원하시는 크기의 가로, 세로를 잡으시면 됩니다.
<img src='http://unspl... : <img> 태그에 class="js-imgSizeSame" 를 통해서 javascript로 이미지 변경작업을 실행하게 됩니다.

CSS 구성

CSS도 구현에 중요한 요소 입니다.

.js-imgSizeSame-wrap {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.js-imgSizeSame-wrap>img {
    visibility: hidden;
}

CSS는 위의 사항과 동일해야 합니다.

overflow: hidden : DIV를 넘어가는 것은 hidden처리해 줍니다.
background-repeat: no-repeat : 배경이미지가 반복되지 않게 처리해 줍니다.
background-size: cover : 배경이미지의 사이즈는 cover로 처리해 줍니다. 이 기능의 핵심요소라고 할 수 있습니다.
background-position: center : 배경이미지의 위치를 중앙에 놓게 합니다.
width: 100%; height: 100%; : 가로, 세로 크기는 100%d입니다.

javascript 구성

javascript의 구현입니다. 이전에 포스팅했던 javascript보다 상당히 간결하게 처리를 할 수 있습니다.

$(".js-imgSizeSame").each(function () {
    $(this).wrap("<div class='js-imgSizeSame-wrap' style='background-image: url(" + $(this).attr("src") + "')></div>")
});

$(".js-imgSizeSame").each(function ()... : HTML주에 class명이 .js-imgSizeSame인 이미지를 모두 찾아냅니다.
$(this).wrap("<div class='js-imgSizeSame-wrap'... : 찾아낸 img를 DIV로 둘러 쌉니다.

이렇게 아주 간결하게 구현이 가능 합니다.

아래는 전체 코드입니다.

구현된 전체 코드

구현화면
아래의 코드를 작성하면 위와 같은 화면을 볼 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
        .js-imgSizeSame-wrap {
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
        }
        .js-imgSizeSame-wrap>img {
            visibility: hidden;
        }
    </style>
    <script>
        $(function () {
            $(".js-imgSizeSame").each(function () {
                $(this).wrap("<div class='js-imgSizeSame-wrap' style='background-image: url(" + $(this).attr("src") + "')></div>")
            });
        });
    </script>
</head>

<body>
    <div style="width:250px;height:150px; margin: 0.5rem;">
        <img src='http://unsplash.it/300/800?random' class="js-imgSizeSame" alt='' />
    </div>
    <div style="width:250px;height:150px; margin: 0.5rem;">
        <img src='http://unsplash.it/300/800?random' class="js-imgSizeSame" alt='' />
    </div>
    <div style="width:250px;height:150px; margin: 0.5rem;">
        <img src='http://unsplash.it/300/800?random' class="js-imgSizeSame" alt='' />
    </div>
</body>
</html>