반응형
예전에 이미지를 정해진 크기의 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>
