srcset и размеры не работают в моем проекте в любом браузере

Question

Я хочу сделать определенное изображение отзывчивым, используя srcset и размеры. Я применил их, как только узнал, правильно определил srcset и размеры и проверил различия в именах файлов, но по какой-то причине он не работает ни в Mozilla, ни в Chrome, который должен их поддерживать. Может кто-нибудь взглянуть на пример моего кода и посоветовать мне, в чем может быть проблема?

HTML:

<div class="slideshow" id="slideshow">
  <div class="images">
    <div>
      <div class="slideshow__slide">
        <img class="slideshow__picture"
             srcset="img/The-Land-Before-Birth.jpg 730w, img/The-Land-Before-Birth-Medium.jpg 487w, img/The-Land-Before-Birth-Small.jpg 365w, img/The-Land-Before-Birth-Tiny.jpg 243w"
             sizes="(max-width: 819px) 89vw, (max-width: 619px) 118vw, (max-width: 419px) 174vw, (max-width: 220px) 331vw, 730px"
             src="img/The-Land-Before-Birth-Raluca-Neferu.jpg"
             alt="The Land Before Birth">
      </div>
    </div>
  </div>
</div>

CSS:

.slideshow {
  display: none; // set to "inline-block" using javascript
  position: absolute;
  height: 88vh;
  width: auto;
  transform: translateX(-8%);
}

.slideshow__slide {
  display: inline-block;
  position: absolute;
  width: 33vw;
  height: 88vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.slideshow__picture {
  position: relative;
  width: 82vh;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Изображение масштабируется в соответствии с высотой, но не шириной, и браузер не переключается между изображениями меньшего или большего размера, как это должно быть независимо от масштабирования. Что-то в моем коде противоречит попытке браузера выбрать изображение, или я где-то допустил ошибку?

Любая помощь высоко ценится! Спасибо, что нашли время, чтобы помочь мне!