Отрегулируйте горизонтальную прокрутку div для содержимого

Question

Я разрабатываю сеть с горизонтальной прокруткой. Для этого я использовал только CSS. Мой код вращает контейнер, чтобы сделать горизонтальную прокрутку «естественной». Я хотел бы настроить ширину контейнера в соответствии с содержащимися в нем изображениями, чтобы он не позволял вам прокручивать дальше, чем изображения. Вот мой html и css код

.slide {
  height: 80vh;
  background-size: auto 100vh;
  background-repeat: repeat-x;
  width: 2000vw;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 2000vw;
  transform: rotate(90deg) translateY(-80vh);
  transform-origin: top left;
}

.outer-wrapper {
  width: 80vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-80vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

<div *ngIf="ready" class="container-fluid" id="projects">
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="slide one">
        <img *ngFor="let image of images" class="img-fluid" [src]="image">
      </div>
    </div>
  </div>
</div>

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

Answer 1

Какой из них ближе?

• http://deneskellner.com/stackoverflow-examples/60270600/scrollit.html
• http://deneskellner.com/stackoverflow-examples/60270600/scrollit-2.html

В первом я удалил ваш div "slide one" и использовал теги img прямо внутри оболочки. Также удален параметр ширины из класса .wrapper.

Во втором я использовал div и фоновые изображения. Теперь они огромные, покрывают экран, и чтобы это произошло, нужно изменить несколько вещей в классе .slide.

Если это то, чего вы хотели достичь, я собираюсь сделать это опубликовать немного, чтобы другие увидели, что происходит. Но я думаю, что это имеет желаемый эффект. Если нет, давайте поработаем над этим.

(Образцы изображений взяты с сайта instagram.com, а первоначальный владелец - Вола Удабе Рандри, он же olaizolav - на случай, если вам интересно)

Answer 2

Наконец мне удалось решить эту проблему самостоятельно. Ключ использует единицы измерения vh (высота области просмотра) для указания ширины оболочки, поэтому пропорции всегда будут сохраняться.