Array
(
    [COMPONENT_TEMPLATE] => .default
    [TYPE] => top_banners
    [NOINDEX] => N
    [CACHE_TYPE] => A
    [CACHE_TIME] => 0
    [QUANTITY] => 1
    [BANNER_ID] => 0
    [~COMPONENT_TEMPLATE] => .default
    [~TYPE] => top_banners
    [~NOINDEX] => N
    [~CACHE_TYPE] => A
    [~CACHE_TIME] => 0
    [~QUANTITY] => 1
    [~BANNER_ID] => 0
)
	
Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Лайтшоп
    • Аспро: Максимум
    • Аспро: Шины и диски 2.0
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Шины и диски, интернет-магазин
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
    • Аспро: Маркет
  • Корпоративные сайты
    • Аспро: Корпоративный сайт 3.0
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Приорити
    • Аспро: Ландшафт
    • Аспро: Медицинский центр 2.0
    • Аспро: Digital
    • Аспро: Курорт
    • Аспро: Стройка
    • Аспро: Сайт медицинского центра
    • Аспро: Корпорация
    • Аспро: Корпоративный сайт
    • Аспро: Корпоративный сайт современной компании
  • Модули
    • Аспро: Привязка ответственного
    • Аспро: Шинный калькулятор
    • Аспро: Кредитный калькулятор
    • Аспро: Универсальный импорт
  • 1С-Битрикс
    • Общее

Как сделать картинки адаптивными?

ID статьи: 76 , создана 27 май 2016 , последнее исправление  26 мар 2019
Изображения в детальном описании товара, анонсе и на страницах со статичной информацией неадаптивны и выходят за границы сайта при просмотре с мобильных.

Решение

Чтобы сделать изображения адаптивными, есть два способа — с помощью тега div с указанием ширины картинки или через класс img-responsive. Рассмотрим каждый вариант по порядку.


Алгоритм настройки через тег div

  1. Перейдите на страницу, изображение на которой нужно сделать адаптивным.

  2. Переключитесь в режим 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

  1. Перейдите на страницу, изображение на которой нужно сделать адаптивным.

  2. Выберите «Редактировать изображение». Раскройте дополнительные параметры и в поле «CSS класс» добавьте:

img-responsive

Сохраните изменения.



  • Комментарии
Загрузка комментариев...

Тэги

1С-Битрикс cdn custom.css favicon Google Fonts google maps Google Mobile Friendly Websites marketmixer php SEO sku template.php title автокомпозит авторизация авторский знак адаптивная верстка активация 1С-Битрикс акции баннеры бренды быстрый заказ валюта видео визуальный редактор вкладки выгрузка товаров главная страница достаточно единицы измерения заголовки задать стили изменить порядок вывода изменить порядок картинок изображения Интернет-магазин капча карта карта сайта карточка товара каталог товаров каталог услуг кеш классы стилей кодировка количество товара композит контакты корзина купить в 1 клик левое меню личный кабинет логотип магазины мало маска телефона медиабиблиотека меню местоположение местоположения модули модуль настроек название сайта настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела не добавляется товар в корзину нет в наличии новости обновление платформы обновление решения Обновление решения обратный звонок ограничения описание раздела основной баннер отзывы отзывы о товаре отключить виджет отображение свойств отображение товаров оформление заказа ошибка активации персональные рекомендации платежные системы подбор проектов подгрузка изображений поиск покупка в 1 клик пользовательские свойства порядок отображения картинок похожие товары почтовые уведомления почтовые шаблоны права доступа премодерация привязать товары проекты разделы каталога разработчикам регистрация резервное копирование свойства заказа свойства инфоблока свойства товара свойства торгового предложения связанные товары символьный код скидки скидки на товар скорость загрузки сайта скрывать описание бренда скрывать текст бренда сортировка социальные сервисы список пользователей способы доставки сравнение товаров ссылка страница партнеров страница успешной оплаты структура сайта текст в карточке товара тизеры типовые проекты типы цен товары на складах торговые предложения умный фильтр условия гарантии услуги установка решения файлы и папки фиксированная шапка на мобильном формы формы на инфоблоках формы обратной связи форум хлебные крошки цены чпу широкое меню