Как сделать картинку адаптивной в html: Как сделать Адаптивным изображение

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

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

ID статьи: 76 , создана 27 май 2016 , последнее исправление  26 мар 2019

Актуально для:

• Аспро: Маркет
• Аспро: Крутой шоп
• Аспро: Интернет-магазин
• Аспро: Шины и диски, интернет-магазин
• Аспро: Оптимус
• Аспро: Next
• Аспро: Шины и диски 2.0
• Аспро: Максимум
• Аспро: Корпоративный сайт современной компании
• Аспро: Корпоративный сайт
• Аспро: Корпорация
• Аспро: Сайт медицинского центра
• Аспро: Стройка
• Аспро: Курорт
• Аспро: Digital
• Аспро: Медицинский центр 2.0
• Аспро: Корпоративный сайт 2.0
• Аспро: Приорити
• Аспро: Ландшафт

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

---

Решение

Чтобы сделать изображения адаптивными, есть два способа — с помощью тега div с указанием ширины картинки или через класс img-responsive. Рассмотрим каждый вариант по порядку.

Алгоритм настройки через тег div

1. Перейдите на страницу, изображение на которой нужно сделать адаптивным.

2. Переключитесь в режим html-редактирования. Найдите код изображения и добавьте к нему тег div.

   
   

Было:

<img src=»/house.jpg»><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

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

---

адаптивная верстка изображения

Как сделать картинку адаптивной

Всем привет. Задержался я с новой статьей (устроил себе несколько дней выходных и уехал на море). Но надеюсь, что этой статьей немного заглажу этот инцидент 🙂

Проблема адаптивных картинок довольно актуальна, поэтому начну с небольших рассуждений и способов реализации, а потом выделю вариант, который, как по мне подходит наилучшим образом.

Итак, около года назад я считал, что для того, чтобы сделать картинку адаптивной (то есть сделать так, чтобы она растягивалась или сжималась по ширине контейнера), достаточно воспользоваться следующим кодом:

.wrapper img{
   width: 100%;
}

И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения

2048x1536px?

Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, — это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.

И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате — это потерянный клиент.

Можно попробовать задать несколько дивов с картинками, а потом, при помощи медиазапросов, скрывать ненужные и показывать только ту картинку, которая подходит под текущее разрешение.

<div>
   <img src="img/small.jpg" alt="Картинка для примера 1">
   <img src="img/middle.jpg" alt="Картинка для примера 2">
   <img src="img/big.jpg" alt="Картинка для примера 3">
</div>

Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.

В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку «Сеть».

Вообще, существует еще много проблем, которые могут возникнуть при верстке адаптивных изображений. И решений, накопилось тоже не мало. Все зависит от конкретной ситуации.

В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:

<picture>
    <source srcset="../img/small.jpg" media="(min-device-width:220px) and (max-device-width:319px)">
    <source srcset="../img/middle.jpg" media="(min-device-width:320px) and (max-device-width:480px)"> 
    <source srcset=".
 
  ./img/big.jpg" media="(min-device-width:481px) and (max-device-width:1920px)">
    <img srcset="../img/big.jpg" alt="Основное изображение"> 
</picture>

Особенность в том, что вместо src — используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.

Ознакомиться с поддержкой браузерами тега picture на текущий момент можно на этой странице.

Вообще, при использовании новых тегов, я рекомендую заглядывать на это сайт и проверять текущее положение вещей.

Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE — не жалко, они должны страдать 🙂 ). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория 🙂

Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill. js.

   <script src="../js/picturefill.js" async></script>

Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).

В отличии от способа, описанного выше, сейчас грузится только одна картинка, а не три, как это было раньше.

Вот такой не хитрый способ. А как вы делаете адаптивными изображения? Поделитесь пожалуйста своими методами в комментариях. Спасибо.

html — Как сделать изображения на нашем сайте адаптивными с помощью CSS?

спросил

1 год, 5 месяцев назад

Изменено 1 год, 5 месяцев назад

Просмотрено 415 раз

У меня есть веб-проект. Как мне сделать так, чтобы изображения на моем веб-сайте отображались на любом дисплее? Будет ли это мой код выдавать ошибку?

HTML-код

  jpeg">
 

CSS-код

 Экран @media и (максимальная ширина: 750 пикселей) {
  .img-загрузка {
    ширина: 100%;
    высота: авто;
  }
}
 

• HTML
• CSS

1

У вас есть несколько вариантов сделать ваше изображение адаптивным.

С текущими настройками ширины: 100% и высоты: авто ваше изображение уже реагирует без медиа-запроса.

Ваше изображение больше не будет реагировать, если вы начнете использовать px в качестве единицы измерения высоты и ширины.

Вам не нужно @media, если вы хотите, чтобы ширина изображения покрывала всю ширину страницы на любом устройстве. только:

HTML:

CSS:

 .img-load{
   ширина:100%;
}
 

Вы должны использовать @media, только если вы хотите, чтобы ваше изображение имело разную ширину на любом устройстве.

Например, если вы хотите, чтобы ширина изображения составляла 50 % на большом экране и 100 % на меньшем экране, вы можете установить:

CSS:

 . img-load{
  высота: авто;
}
Экран @media и (максимальная ширина: 750 пикселей) {
  .img-загрузка {
  ширина:100%;
  }
}
Экран @media и (максимальная ширина: 1200 пикселей) {
  .img-загрузка {
  ширина: 50%;
  }
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — сделать изображение полностью адаптивным, но сохранить соотношение сторон

спросил 1 год, 3 месяца назад

Изменено 1 год, 3 месяца назад

Просмотрено 1к раз

У меня проблема, когда у меня есть полностью адаптивный интернет-магазин, который работает с изменением размера, мне нужно, чтобы изображение коробки продукта было в квадратной рамке. Так, например, изображение 150×150, 150×100 и 100×150 должно быть центрировано по оси X/Y, без растеризации и подобных проблем. У меня нет возможности жестко задавать размеры коробок с продуктами, поэтому он должен реагировать на изменение ширины браузера.

До сих пор я пробовал:

• Используйте скрытый заполнитель 150×150 сзади, чтобы сохранить соотношение сторон и поверх этого добавить элемент, который будет содержать тег изображения (пробовал ширину/высоту автоматически и 100%)
• Использовать скрытый заполнитель 150×150 позади, чтобы сохранить соотношение сторон и над этим добавить элемент, который будет содержать элемент, который имеет фоновое изображение со свойством вложения/обложки, у меня не сработало
• Написание скрипта, который будет работать при загрузке img и создавать холст для замены старого изображения — не работает из-за ленивой загрузки

поэтому мои ограничения:

• Не могу использовать скрипты из-за отложенной загрузки изображений
• Невозможно жестко закодировать размеры поля изображения в поле продукта
• Невозможно использовать что-либо, что не поддерживается всеми браузерами (например, max-width: max-content не поддерживается IE11 и ниже)
• Мне нужно использовать тег img, который предоставляет свойство размеров, чтобы иметь все размеры, необходимые для разных измерений

Заранее всем спасибо

• html
• css
• sass
• адаптивные
• адаптивные изображения

5

Вот простой фрагмент, где изображение имеет максимальную ширину и высоту. Он не превысит свою естественную ширину и высоту, но если он слишком велик для разрешенной области, он уменьшится, чтобы соответствовать, без потери соотношения сторон.

Изображение центрируется по родительскому элементу с помощью flex.

 раздел {
  ширина: 20vw;
  высота: 20vw;
  граница: сплошная черная 1px;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
}
изображение {
  максимальная ширина: 100%;
  максимальная высота: 100%;
} 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.