Wie zentriert man ein responsives geclipptes Bild?

Question

Ich versuche, ein Bild vertikal zu zentrieren, das abgeschnitten wird. Das Bild reagiert. Auf Mobilgeräten ist das Bild in voller Größe und sieht gut aus. Aber wenn der Browser für einen Laptop erweitert wird, wird die gesamte untere Hälfte des Bildes abgeschnitten und nichts wird oben abgeschnitten.

Ich habe versucht, mit den Zahlen in CSS herumzuspielen. Wenn das Bild etwa 800 Pixel breit ist, zeigt es sich besser, aber alles wird unten abgeschnitten.

Alle Ideen, die das Bild vertikal zentrieren und reaktionsfähig bleiben, würden sehr geschätzt werden. Vielen Dank!

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

Wenn ich Recht bekommen, was Sie tun wollen, versuchen Sie Ihr js kommentieren das Bild zu zentrieren und Verwenden Sie den folgenden Stil

.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