Блог

Я добавляю на свой сайт изображение, размеры которого должны быть разными в зависимости от разрешения экрана (довольно часто).

Однако меня смущает то, что изображения, которые я установил, <img srcset="X"> не меняются при заданной ширине.

(быстрое примечание, я использую incogento в Chrome, так что это не ИЗВЕСТНАЯ проблема с кэшем)

в любом случае — продолжайте показывать:

Несколько изображений (определенного размера)

HTML-КОД:

 <img src="im2/1280.jpg"
    srcset="im2/120.jpg 120w, 
            im2/320.jpg 320w, 
            im2/640.jpg 640w,
            im2/1280.jpg 1280w,
            im2/1920.jpg 1920w"
    sizes="(max-width: 250px) 120px,
           (max-width: 480px) 320px,
           (max-width: 720px) 640px,
           (max-width: 1400px) 1280px,
           (max-width: 2000px) 1920px,
    " 
    alt="Image description">
 

Итак, основываясь на моем приведенном выше коде, я бы ожидал, что первое изображение будет 120.jpg (если ширина экрана была меньше 250 пикселей) — однако:

Первый — 320px

при 460px отображается изображение для 1280px

Я предполагаю, что я пропустил некоторую ключевую информацию о том, как это работает.

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

Заранее спасибо — Уолли

Отличную статью для чтения по этой теме можно найти здесь (ее следующий уровень объясняет, как следует использовать тег picture и srcset)

https://alligator.io/html/picture-element/

Короткий ответ заключается в том, что тегам изображений <img> , использующим srcset <img srcset="X"> , будет присвоена ширина изображения, чтобы браузер мог решить, что с ним делать <img srcset="X.jpg 200w">

НО ИМЕННО БРАУЗЕР решает, какое изображение использовать, основываясь на заданных значениях.

Т.е.

 <img srcset="X.jpg 1000w">
 

Браузеры могут использовать это на дисплее шириной 400 пикселей

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