Как сделать картинки адаптивными?
Чтобы сделать изображения адаптивными, есть два способа — с помощью тега div с указанием ширины картинки или через класс img-responsive. Рассмотрим каждый вариант по порядку.
Алгоритм настройки через тег div
-
Перейдите на страницу, изображение на которой нужно сделать адаптивным.
-
Переключитесь в режим 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 также не должен его превышать.
Сохраните изменения.
Алгоритм настройки через класс img-responsive
-
Перейдите на страницу, изображение на которой нужно сделать адаптивным.
-
Выберите «Редактировать изображение». Раскройте дополнительные параметры и в поле «CSS класс» добавьте:
img-responsive
Сохраните изменения.
Здравствуйте, Сергей. Благодарим, что используете наш продукт.
Необходимо проверить, подходит ли логотип под требования по размеру. Не можем уточнить размеры, так как не знаем какое решение вы используете.
Поэтому рекомендуем обратиться в техподдержку.Здравствуйте, Сергей!
Спасибо за комментарий. При загрузке изображения вы можете указать его заголовок и атрибут Alt. Используйте для проверки статью —
Возможно, была допущена ошибка при написании атрибутов, поэтому пропадала картинка.
Если у вас возникнут новые вопросы по типовым настройкам решения, пишите в нашу техподдержку:Спасибо за комментарий. К сожалению, мы не консультируем по вопросам программирования. Можем реализовать доработки индивидуально для вашего проекта. Если интересно, пожалуйста, напишите нам на почту. С удовольствием обсудим детали и выполним задачи для вас.
Помогите разобраться с оптимизацией изображения в HTML для мобильных устройств, с текстом в столбик который располагается слева от него. Размер изображения 615px на 405px.
Если в HTML оставить значение - width="615", а height="405", тогда на мобильных устройствах изображение обрезается по ширине, когда добавляю - width="100%" height="auto", на мобильных устройствах всё адаптируется согласно размерам экрана, но тогда изображение на ПК встаёт по всей ширине страницы, а текст который должен быть слева, уходит под изображение.
Как решить данную задачу?
Заранее спасибо!
Здравствуйте, Максим!
Спасибо за комментарий. К сожалению, мы не консультируем по вопросам программирования. Можем реализовать доработки индивидуально для вашего проекта. Если интересно, пожалуйста, напишите нам на почту. С удовольствием обсудим детали и выполним задачи для вас.
Что то типа
max-width: 100%;
height: auto;
}