5

У элемента <img> есть атрибуты sizes и srcset, пытаюсь разобраться и понять, как они работают, но, кажется, в этом примере они у меня не работают, хотя вроде бы с поддержкой в хроме проблем не должно быть.

Объясните доступно, пожалуйста, принцип их работы.

1

2 ответа 2

1

Атрибут sizes не поддерживается ни в одном браузере. Атрибута imgset вообще не существует. Для указания картинок высокого разрешения используйте атрибут srcset:

  <picture>
   <source srcset="image/mushroom_landscape.jpg, image/mushroom_retina.jpg 2x" media="(min-width: 60em)">
   <img src="image/mushroom.jpg" alt="">
  </picture>

Атрибут srcset имеет эффект только тогда, когда элемент <source> располагается непосредственно внутри элемента <picture>.

Каждая строка может состоять их следующих частей:

  1. адрес изображения;
  2. дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w). Дескриптор подсказывает браузеру, для какой контрольной точки использовать данное изображение;
  3. дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.

Каждая строка в списке должна содержать по крайней мере дескриптор ширины или плотности пикселей.

Браузер выбирает наиболее подходящее изображение для отображения в данный момент времени.

2
  • Я не уверен, что дескриптор ширины работает.
    – DimenSi
    25 фев 2017 в 21:06
  • Можете пожалуйста, показать рабочие примеры, а не справочную информацию?
    – DimenSi
    26 фев 2017 в 0:29
0

У меня так заработало

<picture>
  <source  media="(min-width: 600px)" srcset="2.jpg">
  <source  media="(min-width: 320px)" srcset="1.jpg">
  <img src="def.jpg" alt="A very exciting yacht race.">
</picture>

Ваш ответ

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

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