0

Используется wordpress + bootstrap 4
Есть 2 варианта изображений, 1 для desktopa и 1 для mobile.
Шаблон адаптивный. Вставляет как html код в страницу.

Так вот вопрос в том как загружать только нужное изображение?

Управляю отображение таким образом.

<div>
  <img class="m" src="URL" alt="">
  <img class="d" src="URL" alt="">
</div>

.m {
  display: none;
}

@media (max-width: 540px) {
  .d {
    display: none;
  }

  .m {
    display: block;
  }
}

Возможно я вообще неправильно подхожу к реализации и есть более правильные решения. Может есть какие то wordpress плагины или в bootstrap что то есть.

1 ответ 1

3

Можно и так, как вы написали, но все это - пустая трата времени. WordPress в последних версиях использует srcset для адаптации изображений на сайте. Этот подход обеспечивает создание и перечисление нескольких размеров изображений, а браузер выбирает уже тот размер, который наилучшим образом подходит к текущему размеру экрана. Например:

<img width="400" height="400" src="//test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-400x400.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-400x400.jpg 400w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-150x150.jpg 150w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-157x157.jpg 157w, //test.kagg.eu/wp-content/uploads/2017/08/779366a5-4648-386d-a3e1-c3d63b994237-100x100.jpg 100w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px">

Выводите картинки стандартными средствами WordPress, и вы получите адаптивность картинок на сайте.

17
  • Спасибо. Жаль что с поддержкой плохо у этого атрибут .
    – Dima
    28 авг 2017 в 17:34
  • 1
    С чего вы это взяли? Can I use почитали? Посмотрите страницу test.kagg.eu/shop , в том числе в IE и Edge. 28 авг 2017 в 17:39
  • @Dima см caniuse.com/#search=srcset Кстати srcset в ВП ещё и автоматом "выравнивает" протокол, если сайт доступен по разным.
    – SeVlad
    28 авг 2017 в 17:46
  • Ну и я о том же. На сарае у бабки Пелагеи ещё не то написано. Вы на реальную страницу, напичканную srcset посмотрите. Я же вам ссылку дал. 28 авг 2017 в 17:48
  • Смотрел здесь. developer.mozilla.org/ru/docs/Web/HTML/Element/img Раньше меня этот ресурс не подводил, извините ошибся.
    – Dima
    28 авг 2017 в 17:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.