@wakenbyWork

Как правильно прописать такое в img sizes?

Верстка изображения:

<div class="grocery-picture">
  <img class="grocery-picture__laptop grocery-picture__laptop--desktop" src="/assets/images/laptop@2-547.png">
  <img class="grocery-picture__laptop grocery-picture__laptop--tablet" src="/assets/images/laptop@2-472.png">
  <img class="grocery-picture__laptop grocery-picture__laptop--mobile" src="/assets/images/laptop@2-335.png">
</div>


.grocery-picture {
  position: relative;
  width: max-content;
  height: max-content;

  &__laptop {
    position: relative;
    z-index: 18;
    display: none;
    width: max-content;

    &--desktop {
      width: 547px;

      @media (width > $media-1199) {
        display: block;
      }
    }

    &--tablet {
      width: 472px;

      @media ($media-768 <= width <= $media-1199) {
        display: block;
      }
    }

    &--mobile {
      width: 335px;

      @media (width < $media-768) {
        display: block;
      }
    }
  }
}


В итоге идет смена 3 изображений на пк, планшете, телефоне. Но хочется записать это в виде одного img. Пробовал вот так:

<div class="grocery-picture">
  <img srcset="/assets/images/laptop@2-335.png 335w, /assets/images/laptop@2-472.png 472w, /assets/images/laptop@2-547.png 547w" 
       sizes="(max-width: 767px) 335px, (max-width: 1199px) 472px, (min-width: 1200px) 547px"
  >
</div>


Смена ширины изображения происходит, но фотография не меняется. Видно что качество ухудшается так как ширина становиться верной по media но изображение остается из первого медиа условия, то есть такой 547px
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 2
@alekcena
Нелинейный наставник
Я думал что препроцессоры нужны что-бы делать код понятнее и логичнее.
тег picture
Ответ написан
AlekSays
@AlekSays
FrontEnd developer
Если нужно менять ширину изображения - img srcset, sizes
Если нужно заменять изображение на другое - picture
Почитайте спецификации, там описано что для чего нужно
спецификации от MDN
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы