[css] 화면 사이즈 변경시에도 이미지 중앙을 보여주는 방법 (반응형)

헤더의 경우, 반응형으로 디자인 할 때 화면 사이즈 변경시 이미지 높이 변화없이 이미지의 중앙만 보여줘야 할 때가 있다.

본래의 경우 화면크기가 줄어들면서 이미지 크기가 비율에 맞게 줄어들거나 아래와 같은 조건을 주면 

img{
	display:block;
    margin: 0 auto;
}

 

하지만 이렇게 해준다면 오른쪽부터 사라지도록 되어 있다. 하지만 헤더의 특정 영역에 화면에 크기에 관계없이 반드시 노출되어야할 이미지나 로고 있다면 위와 같은 방식으로는 조금 어려울 것이다. 오늘은 화면 사이즈 변경시에도 이미지의 중앙을 보여주는 css를 알아 보겠다.

body 태그 내의 코드는 다음과 같다.

   <!-- 이미지의 사이즈를 화면과 동일한 크기로 유지, 액자라고 생각하면 된다. -->
   <div class="img-container-size">
   		<!-- 이미지를 중앙으로 보여준다.  -->
        <div class="img-box-center">
        	<!-- 이미지  -->
            <img class="img" src="http://lorempixel.com/1920/400/sports/10/" alt="">
        </div>
    </div>

 

 이 상태에서 css는 다음과 같다.

 .img-container-size{
        position: relative;
        width: 100%; /* 화면 크기와 동일하게 맞춰준다. 전체크기를 */
        height: 400px; ./* 높이 고정 */
        overflow: hidden; /* 이미지의 크기가 크면 나머지 부분 삭제 */
    }
    .img-box-center{
        position: absolute;
        /* 화면 감소시 이미지 크기는 right, left 포지션값에 의해 결정된다. */
        /* 포지션값을 -200% 시킴으로써 화면이 줄어들어도 이미지 크기가 감소하는 right, left 값이 되지 않음 */
        top: 0;
        right: -200%;
        bottom: 0;
        left: -200%;
    }
    .img{
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }

    @media screen and (max-width: 1000px) {
        .img-box-center {
        text-align: left;
        left: -255px;
        }
    }

 

 

아래 글을 참고 했다.

https://velog.io/@yonyas/cssimg%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B0%80-%ED%95%AD%EC%83%81-center%EB%A5%BC-%EB%B3%B4%EC%97%AC%EC%A3%BC%EB%8F%84%EB%A1%9D-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%B0%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0

[css]img태그를 이용해서 이미지가 항상 center를 보여주도록 반응형 배경 만들기

 

 

대안

물론 이미지 하나로 css만을 조작해서 하는 것도 좋은 방법이다. 하지만 저 미디어 쿼리처럼 매번 이미지 마다 저 픽셀 값을 바꿔줘야하는 것은 조금 수고스러운 일이다. 그래서 대안을 제안해보면 화면 크기마다 img 태그의 src값을 바꿔주는 것이다. 보통은 모바일, 태블릿, 데스크탑 이렇게 3가지로 나눠 표준 화면크기를 정하고 화면 크기 변경시 이미지를 바꿔준다.

img태그의 src값은 css와 관련이 없기 때문에 javascript로 바꿔 줘야 하는데 코드는 아래와 같다.

참고로 나는 django-template의 server side rendering을 사용하고 있기 때문에 {{replay_page.footer_image_desktop.url}}을 사용했다. 여기에 src에 들어갈 값을 적어주면된다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
      var csrfToken = "{{ csrf_token }}";
      function changeHeaderImage(w){
        if(w >765){
          document.getElementById("header-img").src = "{{replay_page.header_image_desktop.url}}";
          document.getElementById("footer-img").src = "{{replay_page.footer_image_desktop.url}}";
        } else if( w >335) {
          document.getElementById("header-img").src = "{{replay_page.header_image_tablet.url}}";
          document.getElementById("footer-img").src = "{{replay_page.footer_image_tablet.url}}";
        } else{
          document.getElementById("header-img").src = "{{replay_page.header_image_mobile.url}}";
          document.getElementById("footer-img").src = "{{replay_page.footer_image_mobile.url}}";
        }
      }

      window.addEventListener('resize', _.throttle(function(){
        var w = window.innerWidth;
        changeHeaderImage(w)
      }, 300));
 </script>

 

resize 관련 이벤트 리스너를 이용해 window.innerWidth로 화면 크기를 갖고 오고 그 크기에 맞는 이미지로 바꿔주면 된다.

_.throttle은 화면 크기가 바뀌면서 계속 이 이벤트 함수가 호출 될텐데 그건 클라이언트단에 부하를 줄 수 있기 때문에 300ms 단위로 호출되도록 제한해 둔 것이다. 자세한 내용은 아래 링크를 확인하자

 

https://www.geeksforgeeks.org/lodash-_-throttle-method/

Lodash _.throttle() Method - GeeksforGeeks