Отзывчивое изображение

Question

Я пытаюсь получить отзывчивые изображения для работы с моим заголовком.

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(width: 960px)"> 

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

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw"> 

Что я делаю неправильно?

Answer 1

Вы можете и должны контролировать отображаемую ширину с помощью CSS (то есть: max-width: 960;), но вы также должны сообщить браузеру размер отображаемого изображения с помощью атрибута sizes. По умолчанию размеры атрибута является 100vw:

sizes="(max-width: 960px) 100vw" перечисляется в sizes="(max-width: 960px) 100vw, 100vw", который в основном означает, что если окно просмотра ниже 960px использовать полный видовой экран, в противном случае использовать полный видовой экран, который не имеет особого смысла. То, что вы хотите, состоит в следующем:

sizes="(max-width: 960px) 100vw, 960px"

Вы также можете написать: sizes="(min-width: 960px) 960px, 100vw" или сокращенном: sizes="(min-width: 960px) 960px"

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw, 960px" style="max-width:960px;">