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 fiddle

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;
}