Чтобы сделать изображения адаптивными, есть два способа — с помощью тега div с указанием ширины картинки или через класс img-responsive. Рассмотрим каждый вариант по порядку.
Перейдите на страницу, изображение на которой нужно сделать адаптивным.
Переключитесь в режим html-редактирования. Найдите код изображения и добавьте к нему тег div.
Было:
<img width="260" src="/house.jpg" height="194"><br>
Стало:
<div style = 'max-width:500px;'>
<img style = 'width:100%;' src = '/upload/house.jpg'>
</div>
Где:
/upload/house.jpg – адрес картинки на сайте
max-width:500px — оригинальный размер картинки. При этом ширина изображения не должна быть больше области, в которой находится изображение.
Например, вы хотите сделать адаптивным заглавное изображение услуги. Размер области, в которую оно вписано, равняется 825 px. Соответственно, загружаемое изображение не должно быть больше этого размера по ширине. И параметр max-width также не должен его превышать.
Сохраните изменения.
Перейдите на страницу, изображение на которой нужно сделать адаптивным.
Выберите «Редактировать изображение». Раскройте дополнительные параметры и в поле «CSS класс» добавьте:
img-responsive
Сохраните изменения.
