CSS:图像仅显示一半的高度，并明智地显示多次宽度

Question

看来我的代码正在重复图像宽度方式，并且仅显示一半的高度？

    html, body {
        background-color: black;
    }
    
    .tile.floor {
        background-image: url('https://i.imgur.com/7es7QMs.png');
    }
    
    .tile.floor:empty::after {
        content: "200b";
        visibility: hidden;
    }

    <div class="tile floor"></div>
    <script src="/assets/js/app.js"></script>

我已使用我正在使用的所有代码附上JS小提琴。

Js小提琴

Answer 1

尝试将.tile.floor的高度设置为图像的高度。

html, body {
    background-color: black;
}
.tile.floor {
    background-image: url('https://i.imgur.com/7es7QMs.png');
    height: 40px;
}
.tile.floor:empty::after {
    content: "200b";
    visibility: hidden;
}

根据我的理解，它可以做您想要的。

Answer 2

我不完全确定您在这里要求什么。但是，如果您希望图像调整到元素的高度，请使用background-size: contain。

.tile.floor {
    background: url('https://i.imgur.com/7es7QMs.png') no-repeat; /* Remove no-repeat if you want it to tile */
    height: 38px; /* Whatever height you want */
    background-size: contain;
}