將容器中的溢出圖像置於中心的合法方法？ （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/