Images become misaligned compared to div items, despite the same css

I have a div .pets with several images and divs within it. The css for class pet is applied to both img and div but the images become misaligned as in the image: Here is my html:

<div class="container">
    <div class="pets">
        <img src="/images/animal1.png" class="pet">
        <img src="/images/animal1.png" class="pet">
        <img src="/images/animal1.png" class="pet">
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
    </div>
</div>

And css for pets and pet:

.pets {
    background-color: lightgrey;
    margin-top: 15vh;
    border: 1px solid black;
    text-align: center;
}
.pet {
    background-color: red;
    border-radius: 100%;
    width:20vh;
    height:20vh;
    display: inline-block;
}

How can I make the images align the same as the divs?