Нарушаются пропорции у изображений. Как совместить max-width и width у img?

Question

[Vladimir Zharinov]

Проблема в том, что редактор (ckeditor) при вставке изображений прописывает высоту и ширину картинки. И max-width не работает правильно (пропорции нарушаются). Что делать?

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

<div class="txt">
<img alt="" src="ttt.jpg" style="height:788px; width:700px">
</div>

UPD: Нашёл решение кроме тех, что предложили в комментариях. Нужно у ckeditor немного поправить config.js. А именно, добавить строку
config.disallowedContent = 'img{height,width}';

Answer 1

[Ivanq]

Правильный подход
1. Правильно настроить редактор
2. Если не получилось, перейти к пункту 1
3. ...
4. PROFIT

Быстрый и рабочий подход

.txt img {
    max-width: 100% !important;
    height: auto !important;
}

Comments

[Ivanq]

Vladimir Zharinov Жалко, если настроить редактор не получилось. Когда в коде появляется important, жизнь превращается в ад.

[Vladimir Zharinov]

Задумался. А почему ад?

[Ivanq]

Vladimir Zharinov: Потому что.
1. https://toster.ru/answer?answer_id=526067
2. Код CSS «с душком» (если хотите, пролистайте до Реактивное использование !important и ID

[Vladimir Zharinov]

Ivanq: значит, буду искать способ на стороне редактора

Answer 2

[Максим Тимофеев]

1. Править настройки редактора, что бы он использовал только width
2. Можно так:

.txt img {
    max-width: 100% !important;
    height: auto !important;
}