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