图片高度未正确放置 div

Question

我有 div 这样的：

<div class="card">
    <div class="text-center" style="background-image: url('/public/images/nano.jpg');width:100%;height:100%;height: 115px;background-size: cover;background-repeat: no-repeat;">
        <span class="styleRankingBlue px-2 text-white"></span>
    </div>
    <div class="card-img-overlay text-center d-flex flex-column justify-content-center">
        <p class="card-text mb-0 pt-1">
            <b>

            </b>
        </p>
        </p>
        <p class="card-text mb-0">
            
        </p>
    </div>
</div>

所以我尝试将 width:100%;height:100%; 添加到背景图片，但它加载如下：

如果我说 height: 115px; 这将会发生：

但是我需要像这样加载它：

[![在此处输入图片描述][3]][3]

那么如何使用 CSS 正确地做到这一点？

Answer 1

调整 img 标签内的高度和宽度

<img src="https://i.stack.imgur.com/pdNEU.jpg" height="307px" width="309px">

图片高度未正确放置 div

Image height does not properly placed in div

html

css

background-image