Как сделать изображение подходящим в 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; 
    }