Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (12)

Лучшие ответы пользователя

Все ответы (2)
  • Что именно делает дескриптор w в атрибуте srcset?

    @Ivanushka255 Автор вопроса
    Дескриптор w также как и дескриптор х можно использовать для адаптации картинок под различные ретина-устройства.

    Как это работает? В соответствии с размером экрана и плотностью пикселей устройства, а также шириной, которую будет занимать картинка (атрибут sizes), браузером будет принято решение какую из перечня картинок стоит использовать. Например, у нас есть устройство с шириной - 1366рх и разрешением - 1х. Также у нас есть некий перечень картинок:
    <img
      src="opera-fallback.jpg" alt="The Oslo Opera House"
      srcset="opera-200.jpg 200w,
          opera-400.jpg 400w,
          opera-800.jpg 800w,
          opera-1200.jpg 1200w">

    Какое изображение будет использоваться?
    1) 200/1366=0.14 - не подходит;
    2) 400/1366=0.29 - не подходит;
    3) 800/1366=0.58 - не подходит;
    4) 1200/1366=0.87 - максимально подходящее (наиболее близкое к 1х).

    Как все это работает вместе атрибутом sizes?
    <img
      src="opera-fallback.jpg" alt="The Oslo Opera House"
      sizes="(min-width: 640px) 60vw, 100vw"
      srcset="opera-200.jpg 200w,
          opera-400.jpg 400w,
          opera-800.jpg 800w,
          opera-1200.jpg 1200w">

    Теперь ширина отображения уже не 1366(устройство то же), а меньше - 820рх(60% от 1366рх). Считаем снова.
    1) 200/820=0.24 - не подходит
    2) 400/820=0.48 - не подходит
    3) 800/820=0.97 - нет
    4) 1200/820=1.46 - браузер выберет это*
    * - браузер отдает предпочтение не тому, что немного меньше, а тому, что немного больше
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (72)