How can I make image fit in div (django)?

Question

I'm trying to make my uploaded image(MEDIA not STATIC) fit certain div element.

It seems like I found a solution from here : How do I auto-resize an image to fit a div container

But it doesn't work for me.

The size of dive is different depending on the size of image uploaded.

This is my css for img

img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;
    max-height: 100%;
    max-width: 100%;
}

and part of html.

<ul class="items col-3 gap">
    {% for album in albums %}
        <li class="item thumb {{ album.day }}">
            <figure>

                <div class="icon-overlay icn-link">
                    <a href="{{ album.get_absolute_url }}"><img src="{{ album.get_image_url }}" /></a>
                </div><!-- /.icon-overlay -->

                <figcaption class="bordered no-top-border">
                    <div class="info">
                        <h4><a href="{{ album.get_absolute_url }}">{{ album }}</a></h4>
                    </div><!-- /.info -->
                </figcaption>

            </figure>
        </li><!-- /.item -->
    {% endfor %}
</ul><!-- /.items -->

How can I show my images with consistent size? Need your help

Answer 1

Instead of using 100% use specific value as 100px(or something else) it will fix. but it will not work for image smaller than 100px

img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;
    max-height: 100px;
    max-width: 100px;
   }

The below code will work for all type of images

 img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;

    height: 100px;
    width: 100px;
    max-height: 100px;
    max-width: 100px;
   }