Search code examples
htmlcssbackground-image

Image height does not properly placed in div

I have div like this:

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

So I tried adding width:100%;height:100%; to the background image but it loads like this:

enter image description here

And if I say height: 115px; this will happen:

enter image description here

However I need to load it like this:

[![enter image description here][3]][3]

So how to properly do this with CSS?

Solution

  • Play with the height and width inside your img tag 

    <img src="https://i.sstatic.net/pdNEU.jpg" height="307px" width="309px">