Как сохранить пропорцию изображения в блоке не фиксированного размера?

Question

[maximkalga]

Высота родительского блока фиксирована, ширина нет. Необходимо сохранять пропорцию изображения для этой высоты. В фаерфокс все ок, в хроме отображается не корректно.

Шаблон:

{% if images %}
<div style="overflow: hidden; position: relative; height: 115px; width: 100%;">
{% for image in images %}
<div style="height: 115px; display:inline-block;">
    <div class="img-overlay thumb-label-item-img">
        <img src="{% get_media_prefix %}{{image.media_file}}" alt="" style="height: 100%;"/>
        <div class="item-img-overlay">
            <a class="portfolio-zoom fa fa-plus" href="{% get_media_prefix %}{{image.media_file}}"
               data-rel="prettyPhoto[portfolio]"></a>
        </div>
    </div>
</div>
{% endfor %}
</div>
{% endif  %}

Вывод:
firefox - joxi.ru/EA4N0LghRn4Kmb
chrome - joxi.ru/D2PjNzlhbvnyr3

Answer 1

[maximkalga]

вопрос решен:

<img src="..." style="width: auto; height: 100%;"/>

Answer 2

[sim3x]

шо за ад?
style=убери все в css
{% get_media_prefix %}{{image.media_file}} используй {{ image.url }}

Условно говоря нужно указать картинке height равную высоте родительсткого блока
<img src="..." style="height: 115px;">

Но лучше изменить размер картинки с помощью джанги
https://www.djangopackages.com/grids/g/thumbnails/
https://www.djangopackages.com/packages/p/sorl-thu...