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

Question

我确实在寻找这个答案，但没有成功。我找到了一些方法可以做到这一点，但那些看起来真的很奇怪。（比如 margin: -9999px;）所以我要做的是将这个图像放在我的容器中。 overflow 和 width/heigh 属性正常工作，但您应该看到图像的中心。

提前致谢！

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/

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

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

html

css

center