Что не так в синтаксисе для изображения srcset

Question

Я пытаюсь добиться, чтобы изображение с нормальным разрешением и разрешением высокого разрешения отображалось на том же порту просмотра.например, если я отобразил страницу в телефоне с низким разрешением, который имеет разрешение 550px, он должен показывать изображение с низким пикселем, а на телефонах с высоким разрешением, таких как IPhone, он должен показывать изображение с высоким разрешением, но он не работает

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
    srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 550w,
            https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 2x 550w,
            https://webkit.org/demos/srcset/image-1x.png 1024w, 
            https://webkit.org/demos/srcset/image-2x.png 2x 1024w"  alt="imgsrcsettestimage">

Answer 1

Вы используете 2x и 1024w оба в одной опции. Вы должны либо использовать 2x (или любой x), либо использовать 1024w (или любой w).

Короче говоря, вы не можете смешивать плотность (x) и ширина (w). Поэтому вы должны изменить свой код, чтобы использовать любой из них в соответствии с вашими фактическими требованиями.

Редактировать:

Видимо, ваш требуемый код должен быть таким:

<img src="s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"

     srcset="s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 550w,
             webkit.org/demos/srcset/image-1x.png 1024w, 
             webkit.org/demos/srcset/image-2x.png 2048w" 

             alt="imgsrcsettestimage">

Надеюсь, это решит вашу проблему.