在容器中居中溢出图像的合法方式？ （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/