如何在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;
   }