*Если, конечно, у Вас правило правильное не перебивается какой-то иной инструкцией - ну, попробуйте !important
задать - конечно, если у другой тоже нет этого и она не ниже нужной Вам...
Оставляете один параметр - другой подстроится сам.
img {
max-width: 700px
}
Или в контейнере, который и будет ограничивать img
img {
width: 100%
}
или
img {
max-width: 100%
}
А можно и так, чтоб уж с гарантией:
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
Картинки, вставляемые в посты на этом сайте, используют следущее правило:
.post-text img, .wmd-preview img {
max-width: 100%;
margin-bottom: .5em;
}
Или можно по-новому:
Есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
Источник: https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images