调整水平滚动div到内容

Question

I'm developing a web with horizontal scrolling sections. For that I have used only CSS. My code rotates the container to make the horizontal scrolling the 'natural' one. What I would like is to adjust the width of the container to the images it contains, so it doesn't allow you to scroll further than the images. Here's my html and css code

 .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>

I have tried changing a lot of combinations of the css but none of them will work for more than one fixed screen size

Answer 1

Which one is closer?

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

In the first one I removed your "slide one" div and used the img tags directly inside the wrapper. Also, removed the width setting from .wrapper class.

In the second one, I used divs and background images. They're now huge, covering the screen, and for this to happen, a few things needed to change in the .slide class.

If this is what you wanted to achieve, I'm going to pimp this post a bit so others see what's going on. But I guess it has the desired effect. If not, let's work on it.

(Picture samples are from instagram.com and the original owner is Vola Udabe Randri, aka olaizolav - in case you were wondering)

Answer 2

Finally I managed to solve this issue myself. The key is using vh (viewport height) units to specify the width of the wrapper, so the proportions will always be conserved.