Адаптивная картина в HTML

Цель следующая - добиться ресайза картинки в меньшую сторону от оригинального разрешения. Я использовал следующий css код:

.image {
        max-width: 100%;
        height: auto;
    }

Html:

<div>
  <img class="image" style="width: 171.96mm; height: 145.77mm;" src="http://localhost:88/SanovoNext/ImageHandler.aspx?url=http://doccentermedia//DCProImages/STG-NL/general%20topic/Jansen%20logo.jpg&amp;w=171.96mm&amp;h=145.77mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_height="145.77mm" original_width="171.96mm">
</div>

Но картинка ресайзится только по ширине, по высоте - игнорируется. Почему так? Как это исправить? введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения


Ответы (1 шт):

Автор решения: Alexandr Kruzer

Решение ( !important; ставит приоритет на сss селектор ):

.image 
    {
        max-width: calc(100% - 10mm);
        height: auto !important;
    }
→ Ссылка