프레임에 이미지 꽉 채우기 Part1(CSS)

코딩을 하다 보면 특정 프레임 안에 이미지를 꽉 채워야 할 때가 종종 있다.
여기서 꽉체운다는 것은, 프레임의 가로/세로 보다 이미지의 가로/세로가 크다면 세로가 100%로가 되고, 작다면 가로가 100%가 되는것을 의미한다.

이 것과 관련된 글을 찾아보니 css-tricks에 잘 정리가 되어 있는것을 발견했다.

https://css-tricks.com/perfect-full-page-background-image/

위 페이지에서 여러가지 방법을 제시하고 있는데 그 중 유용한 2가지 방법에 대해서 포스팅 하려고 한다.

CSS로 꽉 채우기.

이 방법은 완벽하진 않다. 하지만, javascript를 쓰지않고 구현할 수 있다는 점에서 매력적이다.

우선 링크...

See the Pen 이미지 꽉 채우기(css) by owen (@wooner) on CodePen.

여기서의 핵심 스타일 소스는 아래와 같다.

.gallery_list_artwork .img> a {
    display: block;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
.gallery_list_artwork .img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 50%;
    min-height: 50%;
    margin: auto;
}

프레임 영역 안의 프레임(위 에서 a태그)를 absolute로 띄우고 크기를 프레임에 200%로 넗힌다음 top, left를 50%씩 줘서 가운데로 위치하게 했다.
그 다음 이미지의 최소 길이와 최소 높이를 50%씩 줘서 안쪽 프레임 넓이의 반절로 길이를 조절하고, top, bottom, left, right를 0을 주고,  margin을 auto를 줘서 가운대로 위치 시켰다. 이렇게 하면 가로든, 세로든 프레임에 딱 맞도록 이미지가 위치하게 된다.
이 방법의 한계는 이미지의 원본 크기가 프레임의 크기보다 2배 이상 클때는 역시 이미지가 프레임을 넘어가게 된다.

더 큰 이미지에 맞추려면 프레임의 안쪽 프레임의 넓이를 더 넓히면 된다. 예를 들어..

.gallery_list_artwork .img> a {
    display: block;
    position: absolute;
    top: -25%;
    left: -25%;
    width: 400%;
    height: 400%;
}
.gallery_list_artwork .img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 25%;
    min-height: 25%;
    margin: auto;
}

하지만 이미지가 얼마나 크게 될지 예측할 수 없는 경우도 있고, 저렇게 영역을 400%씩 넗히는 것도 뭔가 찜찜하다...

다음은 자바스크립트로 맞추는 방법을 게시하겠다.