HTML5 srcset, sizes & Art Direction

Насколько я могу судить, атрибуты srcset и sizes больше ориентированы на применение масштабируемого изображения для размера и разрешения устройства.HTML5 srcset, sizes & Art Direction

Невозможно использовать эти атрибуты для выбора альтернативного изображения в зависимости от размера экрана, например, обрезанного или ориентированного по-разному.

Это правильное понимание ситуации? Означает ли это, что нам придется ждать, пока элемент picture будет широко поддерживаться для этой задачи?

источник

2015-09-30 Manngo

Вы правы, что srcset и sizes предназначены только для предоставления альтернативных вариантов разрешения «того же» изображения - нет никакой гарантии, какой ресурс будет выбран.

Если вы хотите предоставить подрезанные или пропорционально разные альтернативы, которые гарантируют соответствие вашим отзывчивым точкам останова, то <picture> - это то, что вы ищете.

Что касается поддержки идет, <picture> полностью поддерживается в Chrome и Firefox, в ближайшее время будет поддерживаться в MS Edge, и все же не поддерживается в Safari 9. В то же время, вы можете использовать picturefill добавить, что поддержка не поддерживающие браузеры.

источник

2015-09-30 13:53:51

'' это путь тогда. Для этого я написал свой простой пробел. Я не уверен, насколько полезен 'srcset', поскольку он, похоже, находится в конкуренции с' '. – Manngo

В большинстве случаев требуется только 'srcset'. '' следует использовать только тогда, когда это действительно необходимо: https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/ –

-1

Лично я использовал w-дескрипторы и srcset для отображения разнообразных изображений в зависимости от ширины доступного пространства.

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

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

Для моего подхода я не использовал size, picture или любое другое имущество.

код так просто, как это кажется, работает:

<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />

источник

2016-02-13 12:03:31 HubCap

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

С помощью вашего подхода вы указываете браузеру, что изображение будет отображаться на 100% ширины окна просмотра (значение по умолчанию составляет 100 вольт). Это может быть так, хорошо. Но изображение шириной 3200 пикселей будет загружено для экранов шириной 3200 пикселей с экранами с 1 плотностью, шириной 1600 пикселей с 2 плотностью или экранами шириной 800 пикселей с 4 плотностью. Я думаю, что это не работает, как вы думали. –

ответ

Смежные вопросы