html - How can I make image fit in div (django)? -
i'm trying make uploaded image(media
not static
) fit div
element.
it seems found solution here : how auto-resize image fit div container
but doesn't work me.
the size of dive different depending on size of image uploaded.
this css
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"> {% 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 show images consistent size? need help
instead of using 100% use specific value 100px(or else) fix. not work image smaller 100px
img { padding: 0; display: block; margin: 0 auto auto 0; max-height: 100px; max-width: 100px; }
the below code work type of images
img { padding: 0; display: block; margin: 0 auto auto 0; height: 100px; width: 100px; max-height: 100px; max-width: 100px; }
Comments
Post a Comment