반응이 잘리는 이미지의 수직 중심을 맞추는 방법은 무엇입니까?

Question

잘린 이미지를 세로로 가운데에 넣으려고합니다. 이미지가 반응 적입니다. 모바일에서는 이미지가 풀 사이즈이며보기에도 좋습니다. 그러나 브라우저가 랩톱에 대해 확장 된 상태가되면 이미지의 아래쪽 절반이 잘리고 아무것도 맨 위에 잘리지 않습니다.

CSS의 숫자로 놀아 보았습니다. 이미지의 너비가 약 800px 인 경우 더 좋지만 여전히 잘립니다. 모든 클리핑이 하단에서 수행됩니다.

이미지를 세로로 가운데에 배치하고 응답 성을 유지할 수있는 아이디어는 대단히 감사하겠습니다. 감사!

HTML :

<div class="image-wrap" id="wrapper"> 
     <img src="cropped-img.jpg" alt="Oceanside Pier"> 
    </div> 

CSS :

.image-wrap { 
    max-height: 450px; 
    overflow: hidden; 
    max-width: 100%px;  
    -webkit-transition: max-width .5s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: max-width .5s ease-out; /* FF4+ */ 
    -ms-transition: max-width .5s ease-out; /* IE10? */ 
    -o-transition: max-width .5s ease-out; /* Opera 10.5+ */ 
    transition: max-width .5s ease-out; 
} 

    .image-wrap img { 
     width: 100%; 
     -webkit-transition: margin-top .5s ease-out; /* Saf3.2+, Chrome */ 
     -moz-transition: margin-top .5s ease-out; /* FF4+ */ 
     -ms-transition: margin-top .5s ease-out; /* IE10? */ 
     -o-transition: margin-top .5s ease-out; /* Opera 10.5+ */ 
     transition: margin-top .5s ease-out; 
    } 

@media only screen and (min-width: 100%px) { 
    .image-wrap { max-width: 100%; } 
} 

자바 스크립트 :

$(document).ready(function() { 
  
    var imageHeight, wrapperHeight, overlap, container = $('.image-wrap');  
  
    function centerImage() { 
        imageHeight = container.find('img').height(); 
        wrapperHeight = container.height(); 
        overlap = (wrapperHeight - imageHeight)/2; 
        container.find('img').css('margin-top', overlap); 
    } 
      
    $(window).on("load resize", centerImage); 
      
    var el = document.getElementById('wrapper'); 
    if (el.addEventListener) {  
        el.addEventListener("webkitTransitionEnd", centerImage, false); // Webkit event 
        el.addEventListener("transitionend", centerImage, false); // FF event 
        el.addEventListener("oTransitionEnd", centerImage, false); // Opera event 
    } 
}); 

Answer 1

난 당신이 이미지를 센터로 JS를 주석 시도하고 싶은 바로 것을 얻을 경우와 다음 스타일 사용

.image-wrap img { 

    object-fit:cover;//you can also try "contain" here 
    object-fit:center; 

    width: 100%; 
    -webkit-transition: margin-top .5s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: margin-top .5s ease-out; /* FF4+ */ 
    -ms-transition: margin-top .5s ease-out; /* IE10? */ 
    -o-transition: margin-top .5s ease-out; /* Opera 10.5+ */ 
    transition: margin-top .5s ease-out; 

} 

http://caniuse.com/#search=object-fit