Legit way to center overflowing image in container? (HTML/CSS) - html

Question

I do have looked for this answer without success. I found some ways that you can do this but those looked really weird. (Like margin: -9999px;) So what I'm trying to do is center this image in my container. The overflow and width/heigh properties work as they should, but you're supposed to see the center of the image instead.
Thanks in advance!
The Html:
<section class="photo-grid-static">
<div class="photo-grid-container"><img src="Images and videos/odesza1.jpg"/></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
The Css:
.photo-grid-static {
height: 300px;
width: 100%;
display: block;
position: relative;
background: black;
padding: none;
}
.photo-grid-container {
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
background: red;
}
.photo-grid-container img {
height: 100%;
overflow: hidden;
position: relative;
}

Answer 1

<section class="photo-grid-static">
<div class="photo-grid-container" style="background-image: url('videos/odesza1.jpg')"></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
.photo-grid-container {
/* other styles */
background-position: center center;
background-size: cover;
}
If thats what you mean?
Ill do a mock up in a second.
https://jsfiddle.net/7zw0ej89/