[JSP] 반응형 웹에서 이미지 리사이징

퍼블리셔가 반응형 html을 만들어 넘겨 주었다.

이미지 파일이 프로그램으로 등록되어야 하는 경우가 있었는데 html은 모바일 81px, 22px, 웹 162px, 44px로 고정된 크기의 이미지가 들어 있어서, 프로그램화하는 과정에서 임의의 크기 파일이 등록될 경우에 이미지가 멋대로인 문제가 발생했다.

해당 페이지 스크립트에 아래 코드를 추가했다.

$(document).ready(function() {
  var width = $(window).width();
  if( width < 1023 ){
    $(".logoimg").css('width', '81px');
    $(".logoimg").css('height', '22px');
    $(".detail_dev").css('height', '');
  }else {
    $(".logoimg").css('width', '162px');
    $(".logoimg").css('height', '44px');
    $(".detail_dev").css('height', '22px');
  }
});

이렇게 수정하고 나니 다른 문제가 발생. 모바일 크기로 띄우고, 웹 크기로 각각 띄울 때는 문제가 없었지만, 웹에서 윈도우 크기를 늘이거나 줄이는 등 동적으로 크기가 변할 때 이미지 파일 크기가 변하지 않는 게 문제였다.

아래 코드를 추가하면 동적으로 윈도우 크기를 바꿀 때도 적용된다.

// 동적 리사이징
var mql = window.matchMedia("screen and (max-width: 1023px)");
mql.addListener(function(e) {
    // 모바일 
    if(e.matches) {
      $(".logoimg").css('width', '81px');
      $(".logoimg").css('height', '22px');
      $(".detail_dev").css('height', '');
      
    // 웹
    }else{
      $(".logoimg").css('width', '162px');
      $(".logoimg").css('height', '44px');
      $(".detail_dev").css('height', '22px');
    }
});