Блог

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

Мой HTML выглядит так:

 <img
    srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
    sizes="(min-width: 651px) 146px, (min-width: 361px) 121px, 97px"
    src="/logo-146x30.jpg"
    alt="alt text"
/>
  

Я также пытаюсь выполнить противоположные медиа-запросы, такие как:

 <img
    srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
    sizes="(max-width: 360px) 97px, (max-width: 650px) 121px, 146px"
    src="/logo-146x30.jpg"
    alt="alt text"
/>
  

В обоих случаях я всегда получаю изображение /logo-146x30.jpg .

Я попытался повторно загрузить браузер в уменьшенном размере, но в любом случае единственным загруженным изображением является /logo-146x30.jpg .

Также мета окна просмотра похожа на это:

 <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
>
  

Вы видите что-нибудь неправильное в том, что я сделал до сих пор?

Вместо того, чтобы использовать srcset и размеры, используйте медиа-запросы CSS. Это из верхней части моего разума, но попробуйте что-нибудь вроде (это основано на вашем первом изображении):

HTML:

 <div class="image" />
  

CSS:

 @media screen and (min-width: 651px) {
  .image {
    background-image: url(/logo-146x30.jpg);
  }    
}

@media screen and (min-width: 361px) and (max-width: 650px) {
  .image {
    background-image: url(/logo-122x25.jpg);
  }
} 
  

Не забудьте использовать минимальную ширину и максимальную ширину в @media, чтобы они не были переопределены.
Попробуйте также использовать min-width и max-width в вашем решении.