HTML5 srcset, размеры и художественное направление
Насколько я могу судить, srcset а также sizes Атрибуты больше фокусируются на применении подходящего масштабированного изображения для размера и разрешения устройства.
По-видимому, нет возможности использовать эти атрибуты для выбора альтернативного изображения в зависимости от размера экрана, например, обрезанного или ориентированного по-разному.
Это правильное понимание ситуации? Значит ли это, что нам придется ждать picture элемент, который будет широко поддерживаться для этой задачи?
2 ответа
Вы правы в том, что srcset а также sizes существуют только для того, чтобы предоставить различные варианты разрешения для "одного и того же" изображения - нет гарантии, какой ресурс будет выбран.
Если вы хотите предоставить обрезанные или пропорционально разные альтернативы, которые гарантированно соответствуют вашим точкам останова, то <picture> это то, что вы ищете.
Что касается поддержки, <picture> полностью поддерживается в Chrome и Firefox, скоро будет поддерживаться в MS Edge и еще не поддерживается в Safari 9. Тем временем вы можете использовать picturefill для добавления этой поддержки в не поддерживающие браузеры.
Лично я использовал w-дескрипторы и srcset для отображения различных изображений в зависимости от ширины доступного пространства.
Это может показаться довольно грубым, но это работает для меня - я редактирую изображение таким образом, чтобы оно стало "ориентированным на искусство" для ряда общих точек останова - превращая его фактически в ряд различных изображений.
Затем, в зависимости от размера экрана агента, браузер почти всегда выбирает изображение, которое я ранее определил как наиболее подходящее.
Для моего подхода я не использовал size, picture или любая другая собственность.
Код, который так прост, как кажется, работает:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />