Image not getting aligned properly with materialize css card

Question

I am using materialize css for placing images inside cards

But the images seem to get cut at half

<div class="card teal lighten-3 large hoverable">
    <div class="card-image">
        <img id="axolotl-api-picture" style="background-size: 100% 100%;" alt="cute axolotl">
    </div>
    <div class="card-action teal">
        <a class="prev axolotl-api-picture">Previous</a>
        <a class="next axolotl-api-picture">Next</a>
    </div>
</div>

The current image: img

The orginal image(ie what I want): img

So you see the image is not completely showing

Answer 1

Try this:

style="background-size: cover;"

Also I think you need to change the height of this div <div class="card-image"> .The image is taking up the whole space available to it.