将容器中的溢出图像居中的合法方法？ （HTML / CSS）

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/