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

Question

我正在尝试使我上传的图片（MEDIA 不是 STATIC）适合某些 div 元素。

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

但这对我不起作用。

根据上传图片的大小，潜水的大小会有所不同。

这是我的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;
   }