Wie zentriere ich ein Bild innerhalb eines div (sowohl vertikal als auch horizontal) und übersteige es?

Question

Ist es möglich, in CSS folgenden zu erreichen:

Mit der folgenden ist die HTML und CSS:

<div class="preview"> 
    <img src="/big-ass-image.png" width="150" height="500" border="0"/> 
</div> 

.preview { 
    width: 200px; 
    height: 100px; 
} 

so dass nur der Teil des Bildes, in dem div (grau Box im Modell oben) wird angezeigt, und der mittlere Teil des Bildes wird mit abgeschnittenem Rest angezeigt.

Answer 1

Hoffentlich hilft Ihnen das bei Ihrer Anfrage. Wenn Sie Fragen haben, hinterlassen Sie einen Kommentar und ich werde versuchen, meinen Beitrag Ihren Bedürfnissen anzupassen.

.preview { 
 
    background: red; 
 
    width: 200px; 
 
    max-height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
} 
 

 
.preview:hover { 
 
    overflow: visible; 
 
} 
 

 
.preview img { 
 
    width: 150px; 
 
}

<div class="preview"> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>

Answer 2

Eine Lösung wäre position: absolute auf dem Bild zu verwenden, und in der Mitte mit transform: translate und setzte overflow: hidden auf Eltern.

.preview { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 50px; 
 
} 
 
img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: -1; 
 
} 
 
.preview:hover { 
 
    overflow: visible 
 
}

<div class="preview"> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>