How to make content shrink responsively to avoid vertical scrolling?

Question

Hello fellow humans!

SugarCube 2.21 (though this is probably a css question).

I have been able to get things to shrink horizontally using:

img {
  max-width: 100%;
}
.flex {
  display: inline-flex;
}

But whenever I search for "max-height" or any such thing it always seems to be people wanting scroll-bars, which is what I am wanting to avoid. I want everything to shrink vertically until no scroll-bar is needed. I would think it would be a similar solution as the horizontal problem, but apparently not.

Incidentally, when I added "max-height" to img it made inline-flex images equal to line-height, which is obviously useless. Inline-flex is necessary for rows of images to resize together.

Thank you for your help!

Answer 1

Try setting height and width of the element using vh and vw (viewpoint heigth and viewpoint width). Here an example for responsive font size: https://www.w3schools.com/howto/howto_css_responsive_text.asp

Comments

There are images and rows of images of unequal heights which all need to resize together vertically, would you be able to do this with vh?

If I make images 100vh each one stretches with the viewport (and there is even more scroll-bar), and if I make a div 100vh the images still overflow with a scroll-bar. The inline-flex lets rows of images of unequal widths resize together, which is what I was hoping for vertically if it is possible.

---

If you make them 100vh it obviously won't work. The total viewport is 100vh, so you'd have to make the heigth of each image be a fraction of that with the total being less than 100 (You'll have to factor in any gaps between the images as well).

MAybe this solution is better:

Create a div like this:

<div style="top: 10%; bottom: 10%; left: 10%; right: 10%; position:absolute;"></div>

Adjust the numbers to fit whatever your setup is. Into this div you can now put a grid of divs

 

create for example a grid of 10x10 divs (depending on how many pics you have) with width of 10% and height of 10%. I'll be using a for loop to test this out.

<<nobr>>
<<for _i to 0; _i lt 100; _i++>>

<div style="width:10%; height:10%; float:left; background-color:red;">Test</div>

<</for>>
<</nobr>>

Now you can have each of those divs contain a single picture adjusted to fit the div by using object-fit: contain or scale-down.

---

I am having to use a workaround for now: I have it on Itch.io and have the size set so that everything is visible.

Basically there are 11 images each with unique aspect ratios which they must maintain, some of them in rows, one of which drops next to another row with a wider view; one of the individual images is at times replaced with 19 images in three rows which must take up the same space as the image they replace.

I have been able with inline flex to get such a setup to change size all together sideways, but everything vertical wants to allow overflow and add a scroll-bar. The closest would be max-height: vh;, but it requires every row to be given a unique percent of the height (every image or row would have to be given its own unique div class), and rows cannot drop beside each other.

What there needs to be is something like a vertical inline-flex. A very simple solution... which probably does not exist yet. Though you have to set img max-width: 100%; for inline-flex to do what I want, and setting img max-height: 100%; makes the image height equal to line-height, which would probably be a complexity even with a mythical "vertical inline-flex".

---

What's the problem with the second solution I have given you?

---

Here is a link to what I made: Thai Peanut Sauce. I did not think it would work with a grid, especially the spoons: that was the part I mentioned where one image is replaced by 19 images.

You can also download the html file to see what I did, if it doesn't hurt your eyes (I use huge image urls from Google photos, and use ctrl+f to find things instead of spacing out everything neatly).

---

I don't see why the grid solution shouldn't work. You don't have to literally order the divs in a grid. You can position them however you want and they'd still expand and shrink according to your liking.

Also - while your code looks pretty unreadable, the end-product seems fairly simple. Maybe just add the images to the game in a folder instead of using urls (unless this is intended to be a mobile game).

Is there maybe something I'm missing?

I don't even see how the aspect ratios vary that much. The top nine should all have the same ratio (and if not that can be accomplished very easily with any painting program), meaning you have all in all only three different ratios to define in a way where they fit the screen.

And why do the spoons have to be replaced with 19 images? It seems there are only 5 different elements to click on there, so at worst five properly positioned see-through buttons would do the job, but what you actually should do is to use an image map to make certain areas of a single image clickable.

---

Oh no, you are not missing anything. When I found out you could make an image into a link I immediately started making games with pictures made out of several images pieced together, to make clickable areas. I have made some large games this way already, including one in which a piano has each key as a separate image playing a sound when clicked.

I assumed that the only other way to make point-and-click games was by using a game engine which I did not have, since I did not see anyone else doing it with Twine. Now that I know about image mapping I should be able to do a lot better! Especially since I just now searched image mapping and found this. My only concern is getting image mapping to fit in with the other things you can do with Twine, mainly the <<link>> macro. If that can work, then my life is changed!

Adding something to the game in a folder does not show up in testing, and since the audio and images and fonts I have made are what I would want to be testing I basically need to use urls for them all, at least I think so.

Thank you so much for your help!

 

---

To combine image maps with sugarcube's features, best take a look at the html-markup section of the documentation. Use data-passage to link to a different passage.