이미지 비율 맞추기

반응형 웹페이지에서는 이미지의 크기가 창 크기, 혹은 모바일 화면에 따라 다르기 때문에 비율을 맞추는 것이 중요하다.

distribution

보통 이렇게 div 안에 img 태그로 이미지를 넣을 것이다. 하지만 창을 줄이거나 키워보면 사진이 가려지는 것을 알 수 있다. 배너나 슬라이드쇼를 보면 화면 너비의 100%로 유지되어 창의 크기를 줄이면 사진도 같이 줄어드는 것을 볼 수 있는데 그런 방식으로 구현해보자.

vw 사용하기

반응형 웹페이지는 percentage에 의존을 많이 하고 있다. 하지만 percentage는 부모 container의 크기에 의존하기 때문에 percentage보다 vertical width (vw)나 vertical height (vh)을 사용하는 것이 좋다. 이는 현재 창의 너비, 높이의 비율을 나타내는 것으로 100vw 일 때, 현재 창 크기의 너비와 같다.

<!DOCTYPE html>
<html>
<style>

.container{
  border: 3px solid red;
  margin: 0 auto;
}
.container img{
  width: 95vw;
}

</style>
<body>
<div class="container">
  <img src="img_girl.jpg">
</div>
</body>
</html>

이렇게 하고 창을 움직여보면 container의 너비가 창 크기에 따라 95%의 비율에 맞춰 움직이는 것을 알 수 있다. 하지만 높이는 움직이지 않는다. 높이는 사진 너비에 따라 비율에 의해 결정되는 것이라고 생각하고 width가 창 너비의 95%일 때, height는 120% 정도로 정하자. (이는 세로 사진의 경우이고 가로인 경우는 height을 더 작게 해주면 된다.)

distribution

Overflow

이제 사진의 비율이 맞고, 창의 너비를 움직여보면 사진 전체가 비율을 어느정도 유지하면서 크기가 바뀌는 것을 알 수 있다. 하지만 이미지의 크기가 바뀌는 것은 깔끔해보이지도 않고, 혹시나 비율이 다른 이미지가 들어오면 문제가 생길 수 있다. 그래서 overflow 을 이용해 더 깔끔하게 만들어 볼 것이다. 이전과는 다르게 container의 너비, 높이를 먼저 정의한다. 그리고 overflow: hidden 을 넣어주면 넘치는 부분을 container div가 잘라버린다.

distribution

하지만 창을 엄청 크게 만들어보면, 남는 공간이 생긴다. 그래서 이미지를 container div의 100% 크기로 지정해주면 되는데, 이 경우에는 세로길이가 더 긴 container이므로 다른 사진(가로길이가 더 긴 사진)이 들어 왔을 때, 높이에 빈공간이 생길 일이 있다. 그러므로 height: 100%; width: auto; 로 이미지 크기를 정해주면 된다.

distribution

테스트로 가로길이가 더 긴 사진을 넣어보자.

distribution

사진이 잘리지만 사진의 비율이 유지되면서 resposive 기능도 살렸다. 우리가 원하는 CSS가 완성되었다.

<!DOCTYPE html>
<html>
<style>

.container{
  border: 3px solid red;
  margin: 0 auto;
  width: 95vw;
  height: 120vw;
  overflow: hidden;
}
.container img{
  width: auto;
  height: 100%;
}

</style>
<body>

<div class="container">
  <img src="pic_trulli.jpg">
</div>

</body>
</html>

마지막으로 이렇게 그림의 비율을 유지하며 나머지 부분을 숨길경우 그림의 가운데 위주로 나오길 바라는 경우가 많다. 이때는 container div 의 position을 relative로 바꿔주고 자식 div을 정가운데로 놔주면 된다.

<!DOCTYPE html>
<html>
<style>

.container{
  position: relative;
  border: 3px solid red;
  margin: 0 auto;
  width: 95vw;
  height: 120vw;
  overflow: hidden;
}
.container img{
  width: auto;
  height: 100%;
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

</style>
<body>

<div class="container">
  <img src="pic_trulli.jpg">
</div>

</body>
</html>

이제 그림이 어마어마하게 크지 않은 이상 (-9999px로 이동시켜도 사진이 잘리는 경우) 가운데 위주로 그림이 보일 것이다.

distribution

JS Star 블로그