レスポンシブにクリップされたイメージを垂直方向にセンタリングする方法は？

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%; } 
} 

はJavaScript：

$(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