div에서 100 % 높이의 수직 정렬 img

Question

div의 이미지를 100 % 높이로 정렬하는 방법을 찾는 해결책을 찾고 있습니다. 높이를 모르겠습니다.

이 HTML이 있습니다. 나는 추가 더 래퍼를 제외하고 HTML로 많은 일을 할 수 없습니다

<div id="wrapper"> 
    <img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" /> 
</div>​ 

그리고이 확실히 고정 CSS를 - 차 나는 이미지가 모든 브라우저에서 오버 플로우 브라우저의 창을하지 않는 것을 수행해야합니다

#wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #ddd;   
} 
img { 
    max-width: 100%; 
    max-height: 100%; 
} 

http://jsfiddle.net/2nkVm/

감사합니다.

Answer 1

이 시도 :

img { 
    display:block; 
    position:absolute; 
    top:50%; 
    margin-top:"negative margin based on half of image height"; 
} 

업데이트하여 바이올린 :

http://jsfiddle.net/2nkVm/3/

Answer 2

$(document).ready(function() { 
    positionImage(); 
    $(window).resize(function() { 
     positionImage(); 
    }); 
}); 
function positionImage() { 
    var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height(); 
    var wrapperHeightOffset = wrapperHeightOffset/2; 
    $('#wrapper').css('paddingTop', wrapperHeightOffset + 'px'); 
}