Я реализующий реагирующие изображения в текущем проекте, а также ссылки this post on CSS-Tricks, в котором он использует следующий пример:Адаптивные изображения: Srcset и размеры
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
Я использовал этот формат в моем собственном проекте, с указанием только ширина чередуется, и интересно W3C, валидатор говорит мне:
Когда атрибут
srcsetимеет какую-либо кандидат изображений строки с шириной дескриптора, «Размеры» атрибут м ust также присутствуют
Я понимаю, что спецификация развивается, и это может быть скорее вопросом валидатора, но я не могу найти четкого ответа относительно того, действительно ли это так. Из того, что я читал, указать источники по ширине должно быть достаточно, чтобы помочь браузеру сделать лучший выбор.
В моем проекте у меня есть макет сетки в стиле Pinterest, с тремя столбцами изображений, изменяющих размер до одного через точки останова; и я также интересно, если мой sizes разметки правильно с этой целью:
<img src="img/tile-320.jpg"
srcset="img/tile-480.jpg 480w, img/tile-720.jpg 720w"
sizes="(min-width: 768px) 33.3vw, (min-width: 568px) 50vw, 100vw"
alt="srcset test">
Таким образом, у меня есть три размера изображения, с версией 320px как по умолчанию/запасной вариант, и после того, как 768px, сетка имеет три колонки ; на 568px у него два, и в противном случае можно считать, что столбец/изображение заполняет ширину окна просмотра.
Мои вопросы, а именно: (1) Действительно ли требуется sizes для браузера при указании альтернативных источников на основе ширины? (2) Используется ли моя разметка с использованием sizes в приведенной выше реализации?
1. размеры не требуются. 2. Ваши размеры правильные. Но если вы понимаете размеры, должно быть ясно, что это необходимо. Ширина физического изображения сама по себе не помогает. Браузеру также необходимо знать ширину изображения внутри вашего макета. размеры уменьшаются до 100 вольт, если размеры не присутствуют. –
@alexanderfarkas получил это, спасибо, Александр; в этом есть смысл. Думаю, я понял, особенно из статьи CSS-Tricks и других, которые я видел, что браузер «выяснит» контейнер изображения и/или размер экрана и выберет подходящий источник на основе этих вычислений. Однако, конечно, имеет смысл, что указание параметров калибровки поможет браузеру. – nickpish