[반응형 웹] 웹브라우저가 변경될때 이미지 사이즈에 따른 높이값 변경

<div class="banner">

<ul>

<li><img src="images/banner.jpg"></li>

</ul>

</div>

위와 같은 html 코드가 있다고 할때에...

웹브라우저 창의 사이즈가 조절이 일어날때에.. 그 이미지의 가로 사이즈가 100%로 정해져있을 경우에 이미지의 가로 사이즈는 웹브라우저 사이즈에 맞게 자동으로 변경이 됩니다. 그러나 문제는 이미지의 세로 사이즈는 자동으로 변경 되기 때문에 알 수가 없습니다.

따라서 이미지의 크기에 맞게 ul의 높이값을 지정하여 li 한개에 있는 이미지만 보여주고 싶다면...창이 크기가 변경 되고 나서 이미지의 높이값을 jQuery를 통하여서 값을 읽고 ul 의 높이값을 지정하면 됩니다.

아래는 jQuery 예시 입니다.

<script>

$( window ).resize(function() {
    var imgHeight = $('.banner').find('li:first').css('height');
    $('.banner').find('ul:first').css('height', imgHeight);
    });
$( window ).resize();

</script>