Поиск
Искать в:
Все решения  
  • Все решения
  • Интернет-магазины
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Шины и диски, интернет-магазин
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
    • Аспро: Маркет
  • Корпоративные сайты
    • Аспро: Медицинский центр 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 footer.php google maps Google Mobile Friendly Websites init.php marketmixer robot.txt SEO seo sku template.php title web clip icon автокомпозит авторизация адаптивная верстка активация 1С-Битрикс активное и подключенное свойство акции артикул товара баннеры бета-версия бренды быстрый заказ видео виджет инстаграмм визуальный редактор вкладки главная страница единицы измерения заголовки изменение заглавие блока изображения капча карта карта сайта карточка проекта карточка товара каталог товаров каталог услуг кеш классы стилей ключевые слова кодировка количество товара композит композитный сайт контакты корзина левое меню логотип магазины маркер на карте маска телефона медиабиблиотека меню местоположения микроразметка мобильная платформа модули модуль настроек название сайта наличие товара настройка настройка валют настройка веб-форм настройка инфоблоков настройка компонентов настройка свойств настройка списка настройки доступа настройки инфоблока настройки магазина настройки модулей настройки раздела нет в наличии новая цена новости облако 1с-битрикс обновление платформы обновление решения обратный звонок ограничения округление скидок описание страницы описание товаров основной баннер отзывы о товаре отображение свойств отображение товаров оформление заказа ошибка активации переиндексация переустановка решения персональные рекомендации платежные системы подбор проектов подразделы каталога поиск покупка без наличия покупка в 1 клик поля популярные категории похожие товары почтовые уведомления разделы каталога разработчикам регистрация резервное копирование свойства заказа свойства инфоблока свойства раздела свойства товара связанные товары символьный код скидки скидки на товар скорость загрузки сайта сортировка социальные сервисы список пользователей способы доставки сравнение товаров статистика статьи структура сайта тайтл текст в заголовке браузера тизеры типы цен торговые предложения умный фильтр услуги установка решения уязвимости файлы и папки фильтр по годам формы обратной связи формы редактирования форум хлебные крошки чпу эквайринг элементы навигации