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

Question

我確實一直在尋找這個答案，但沒有成功。 我找到了一些可以執行此操作的方法，但這些方法看起來很奇怪。 （像邊距：-9999px;）所以我想做的就是將此圖像居中放置在容器中。 溢出和寬度/高度屬性應按其應有的方式工作，但您應該看到圖像的中心。

提前致謝！

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>

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;
}

如果那是什么意思？

一秒鍾之后，我會做一個模擬。

https://jsfiddle.net/7zw0ej89/