调整CSS图像大小以适合

Question

So im putting list of types and each one has an image. As you can see the list below has the water image cut. How can I fix this?

I have a class for the water text so it can display the text and im trying to add it to a html list.

this is my class code in css

.water{
    background: url('../images/water.png');
    object-fit: contain;
    background-repeat: no-repeat;
    max-width:100%;
    height:auto;
    text-indent: -9999px;
}

This worked thanks to HolyMoly

"object-fit is used directly on img tags to my understanding, I think you want background-size: contain or background-size: cover since you are not applying the css to an image tag, rather using the image as a background" – HolyMoly

Answer 1

kindly check background-size:contain or background: url('../images/water.png') 50px 50px; directly mention you size of image