Wie man eine <img> mit einer festen Höhe mit CSS cross

Question

zuschneiden, zentrieren und zentrieren Ich versuche, eine Möglichkeit zum Zuschneiden und Größe von Bildern zu finden, um in den Container ohne Verzerrung zu passen. Ich habe die Höhe des Containers festgelegt, sodass das Bild 100% dieser Höhe ausfüllen muss und die Mitte des Bildes mit der Mitte des Containers übereinstimmen muss.

Das ist mein html:

<div class="container"> 
    <img src="image.jpg" class="img-responsive"> 
</div> 

Und das ist CSS:

.container { 
overflow: hidden; 
position: relative; 
height: 280px; 
} 
.img-responsive { 
display: block; 
max-width: 100%; 
height: auto; 
} 

Answer 1

Diese Technik funktioniert recht gut:

.container { 
overflow: hidden; 
position: relative; 
height: 260px; 
width: 358px; 
} 
.img-responsive { 
position: absolute; 
width: auto; 
height: 100%; 
left: 50%; 
top: 50%; 
-webkit-transform: translate(-50%,-50%); 
-ms-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%); 
}