html - 如何使图像适合 div (django)？

Question

我试图让我上传的图片(MEDIA 而不是 STATIC)适合特定的 div 元素。

看来我从这里找到了解决方案:How do I auto-resize an image to fit a div container

但这对我不起作用。

dive 的大小根据上传图片的大小而不同。

这是我的 css 用于 img

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

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

如何显示尺寸一致的图片？需要你的帮助

Answer 1

与其使用 100%，不如使用特定值 100px(或其他值)，它将修复。但它不适用于小于 100px 的图像

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

下面的代码适用于所有类型的图像

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

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