Каковы атрибуты ширины и высоты при использовании srcset и размеров?

Question

Если мы используем атрибуты srcset и sizes, по-прежнему полезно указать атрибут src как резерв. Аналогично, я полагаю, что старые браузеры также использовали бы атрибуты width и height, если бы они были указаны. Но делают ли современные браузеры?

Например:

<img 
    src="foo100x100.jpg" 
    srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w" 
    sizes="100vw" 
    width="100" 
    height="100" 
    alt="example" 
> 

являются width и height атрибутов любого использования в современный браузер в этом примере?

Answer 1

Основываясь на экспериментах, он ведет себя так, как если бы вы указали width и height Свойства CSS в пикселях. Однако это может быть отменено вашим собственным CSS.

img { 
 
    width: 200px; 
 
    /* height will be 100px because of the HTML attribute */ 
 
}

<img 
 
    src="http://placehold.it/100x100" 
 
    srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w" 
 
    sizes="100vw" 
 
    alt="" 
 
    width="100" 
 
    height="100" 
 
>

Это немного разочаровывает, так как я надеялся, что современные браузеры будут использовать width и height, чтобы определить, что соотношение сторон изображения было перед загрузкой изображения, чтобы избежать компоновка следующего содержимого, прыгающего по мере загрузки страницы.