Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Лайтшоп
    • Аспро: Максимум
    • Аспро: Шины и диски 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 element.php favicon Google Fonts google maps marketmixer SEO sku template.php title автокомпозит авторизация адаптивная верстка активация 1С-Битрикс активное и подключенное свойство акции баннеры блог бренды быстрый заказ валюта видео вкладки выводить описание главная страница добавить поле заголовки заголовки на главной изменить заголовки изображения Интернет-магазин каптча капча карта карточка товара кастом каталог товаров кеш классы стилей код решения кодировка количество товара конвертация валюты контакты корзина левое меню личный кабинет логотип магазины маска телефона мегаменю медиабиблиотека меню местоположения многосайтовость модули модуль настроек название сайта наличие товара настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка списка настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела нет в наличии новости номера обновление платформы обновление решения Обновление решения обратный звонок ограничения округление скидок основной баннер отзывы отзывы о товаре отображение свойств отображение товаров отсутствующие товары отсутствующие товары на складах оформление заказа переустановка решения персональные рекомендации платежные системы подписка на товар подразделы каталога поиск покупка в 1 клик пользовательские свойства поля похожие товары почта почтовые уведомления почтовые шаблоны привязать товары примечание в корзине проекты разделы каталога разработчикам региональность регистрация резервное копирование рейтинг свойства заказа свойства инфоблока свойства товара связанные товары связи символьный код скидки скидки на товар скорость загрузки сайта скриншоты скрыть товары в поиске сортировка социальные сервисы список пользователей способы доставки сравнение товаров ссылка структура сайта счетчики текст в летающей корзине тизеры типы цен товары в регионах товары на складах торговые предложения умный фильтр услуги установка решения файлы и папки фильтр по годам формы формы на инфоблоках формы обратной связи форум хлебные крошки цены чпу элементы