Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: 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 также не должен его превышать. 


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


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

Тэги

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