object-fit未按预期执行

Question

所以我尝试使用object-fit，但似乎忽略了css (似乎是在自动模式下)。

第二个图像是我希望它看起来是什么样子(或者至少具有的功能)。

HTML

<section
    style="background-image: url('https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&')"
    class="image"
>
    <img src="https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&">
</section>

<br><br><br>

<section
    style="background-image: url('https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&')"
    class="image contain"
>
    <img
        src="https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&"
        style="visibility: hidden;"
    >
</section>

SCSS

.image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    max-height: 400px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 200px;
    &.auto {
        background-size: auto;
    }
    &.contain {
        background-size: contain;
    }
    &.cover {
        background-size: cover;
    }

    img {
        // max-height: 100%;
        // max-width: 100%;
        width: 100%;
        object-fit: contain;
        object-position: 50% 50%;
    }
}

这就是小提琴

https://jsfiddle.net/whb7qLku/2/

Answer 1

由于图像处于纵向模式，您需要限制图像的高度才能使其工作。

设置img { max-height: 100%; max-width: 100%;}或img { height: 100%; width: 100%;}