Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Шины и диски, интернет-магазин
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
    • Аспро: Маркет
  • Корпоративные сайты
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Медицинский центр 2.0
    • Аспро: Digital-компания
    • Аспро: Курорт
    • Аспро: Стройка
    • Аспро: Сайт медицинского центра
    • Аспро: Корпорация
    • Аспро: Корпоративный сайт
    • Аспро: Корпоративный сайт современной компании
  • Модули
    • Аспро: Шинный калькулятор
    • Аспро: Кредитный калькулятор
    • Аспро: Универсальный импорт
  • 1С-Битрикс
    • Общее

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

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

Решение

Чтобы сделать изображения адаптивными, необходимо добавить тег 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 также не должен его превышать. 


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


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

Тэги

1C 1С-Битрис cdn custom.css element.php favicon google maps include.php init.php marketmixer robot.txt SEO sku template.php title web clip icon автокомпозит авторизация адаптивная верстка активация 1С-Битрикс активное и подключенное свойство акции артикул товара баннеры большая галерея бренды быстрый заказ валюта видео визуальный редактор вкладки главная страница единицы измерения заголовки изображения как загрузить каптча капча карта карточка проекта карточка товара карточка услуги каталог товаров каталог услуг классы стилей ключевые слова код решения кодировка количество товара контакты корзина левое меню личный кабинет логотип магазины маркер на карте маска телефона медиабиблиотека меню местоположения мобильная платформа модули модуль настроек название сайта наличие товара настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка списка настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела нет в наличии новости облако 1с-битрикс обновление платформы обновление решения обратный звонок ограничения описание для анонса описание страницы описание товаров основной баннер отзывы отзывы о товаре отображение свойств отображение товаров оформление заказа ошибка 404 ошибка активации персональные рекомендации платежные системы подбор проектов подлинность лицензии подписка на товар поиск покупка без наличия покупка в 1 клик пользовательские свойства пользовательские скрипты похожие товары почтовые уведомления права доступа премодерация разработчикам регистрация резервное копирование рейтинг свойства заказа свойства инфоблока свойства товара связанные товары связи символьный код скидки скорость загрузки сайта сортировка социальные сервисы список заказов список пользователей способы доставки сравнение товаров статистика статьи стикеры страница успешной оплаты структура сайта текст в заголовке браузера текст в карточке товара тизеры тип цен типы цен торговые предложения умный фильтр услуги установка решения уязвимости файлы и папки формы обратной связи формы редактирования форум хлебные крошки чпу эквайринг элементы навигации