У меня проблема с https://github.com/aFarkas/lazysizes
<img class="figure-image lazyload"
src="{{ image.src|resizeDynamic(800) }}"
srcset="{{ placeholderImage(800, 800 / image.aspect) }}"
data-srcset="
{{ image.src|resizeDynamic(1920) }} 1920w,
{{ image.src|resizeDynamic(1440) }} 1440w,
{{ image.src|resizeDynamic(1320) }} 1320w,
{{ image.src|resizeDynamic(1024) }} 1024w,
{{ image.src|resizeDynamic(800) }} 800w,
{{ image.src|resizeDynamic(600) }} 600w,
{{ image.src|resizeDynamic(375) }} 375w"
data-sizes="auto"
alt="{{ image.alt|e }}">
в браузере, изображение выше работает только для ширины. но на мобильных устройствах он учитывает максимальное значение ширины устройства и его высоты.
Например, iPhoneX имеет размерность 375 x 812. но в портретном режиме (ширина 375 пикселей) изображение вытягивается для {{image.src | resizeDynami c (1024)}} 1024 Вт. , без вытягивания изображения шириной 375 пикселей . Я думал, что это работает для максимального значения для реального устройства. также в режиме наземного пространства (ширина 812 пикселей) изображение вытягивается для {{image.src | resizeDynami c (1920)}} 1920w,
это очень странная вещь. Я приложил изображения о своих проблемах.
но я хочу сделать это, учитывая ширину устройства, как P C.
Я гуглил эту вещь. он рекомендует мне тег изображения, как показано ниже
<picture>
<source data-srcset="assets/imgs/6.jpg" media="(max-width: 500px)" />
<source data-srcset="assets/imgs/7.jpg" media="(max-width: 1024px)" />
<source data-srcset="assets/imgs/9.jpg" />
<img
class="lazyload"
data-src="assets/imgs/8.jpg"
alt="image with artdirection" />
</picture>
, но я думаю, что использование тега изображения кажется не очень хорошим ...
Если есть какие-либо советы, пожалуйста, дайте мне знать, спасибо:)