Center image in DIV and hide the overflowing - css

Question

This is kind of an unique case. I am trying to achieve the following:
Square images should be 100% 100%. Basically fill out the entire DIV (which is squared)
All images should fill out the entire height of the DIV.
All images should be aligned center
If they overflow the X-axis, they should overflow and hide
https://jsfiddle.net/cxnyLxfn/2/
.image-container {
position: relative;
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
overflow: hidden;
}
.image-container img {
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
I almost achieved this, except for centering the images no matter what. The Google logo should be centered and the rest look fine as they are. How do I achieve my four requirements?

Answer 1

I usually use a flex approach to this:
.image-container {
display: flex;
width: 300px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
}
img {
display: block;
height: 100%;
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>

Answer 2

put css for img
img {
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}

Answer 3

Try this:
img {
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}

Answer 4

Using object fit property...
fiddle
.image-container {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
}
img {
object-fit: contain;
height: 100%;
width: 100%;
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>

Answer 5

The tansform:translate() will do the magic. Here is an working example-
.image-container {
position: relative;
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
overflow: hidden;
}
img {
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>