@svsteem
фронтенд разработчик

Как реализовать Picturefill адаптивные картинки под ретина в wordpress?

В данный момент занимаюсь переносом верстки заказчика на wordpress. Столкнулся с проблемой переноса адаптивности изображений под разные экраны, ретина в том числе, реализованной на Picturefill. Конструкция в верстке такая:

<picture>
            <source media="(min-width: 1024px)" srcset="img/car-desktop@1x.jpg 1x, img/car-desktop@2x.jpg 2x">
            <source media="(min-width: 768px)" srcset="img/car-tablet@1x.jpg 1x, img/car-tablet@2x.jpg 2x">
            <img src="img/car@1x.jpg" srcset="img/car@2x.jpg 2x" alt="Main_img_Car">
</picture>


Сам wordpress, насколько я знаю, разбивает картинки на несколько разрешений, в итоге получается такая конструкция в коде:

<figure class="about__picture">
<img class="alignnone size-full wp-image-170" src="http://cm09224.tmweb.ru/wp-content/uploads/car-tablet@2x.jpg" alt="" width="1304" height="548" srcset="http://minirent.club/wp-content/uploads/car-tablet@2x.jpg 1304w, http://minirent.club/wp-content/uploads/car-tablet@2x-300x126.jpg 300w, http://minirent.club/wp-content/uploads/car-tablet@2x-768x323.jpg 768w, http://minirent.club/wp-content/uploads/car-tablet@2x-1024x430.jpg 1024w" sizes="(max-width: 1304px) 100vw, 1304px" />
<figcaption class="about__features features hide-text">

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

Подскажите пожалуйста, есть ли способ реализовать подобную конструкцию на wordpress, с возможностью загружать фото из админки (на крайний случай, без этого)? А если такой возможности нет, может быть есть другие реализации для адаптивности изображений в этой CMS?
  • Вопрос задан
  • 696 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы