lazysizes нужно работать только для ширины устройства. не для высоты устройства - PullRequest
0 голосов
/ 05 апреля 2020

У меня проблема с 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,

это очень странная вещь. Я приложил изображения о своих проблемах.

enter image description here

enter image description here

enter image description here

но я хочу сделать это, учитывая ширину устройства, как 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> 

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

Если есть какие-либо советы, пожалуйста, дайте мне знать, спасибо:)

...