How to keep side by side images from going below each other in a smaller window?

Question

Hello everybody!

(SugarCube 2.21)

I know I can use "max-width: 100%;" to make images scale to the size of the window, but if there are images side by side one will drop below the other in a smaller window before they change size. Is there a way to make them stay on the same line, and change size together?

Thank you all!

Answer 1

There are two way to achieve what you are (probably) after. I'll assume your passage code looks something like this, with the "nobr" tag on the passage or Config.passages.nobr set to true.

<div class="imagecontainer">
  <img src="https://i.imgur.com/8ZSrZ3g.jpg" />
  <img src="https://i.imgur.com/4YxWIdE.jpg" />
</div>

First, if you know there will be two images, you can float them to the left and set max-width to 50%

.imagecontainer {
  width: 100%;
}

.imagecontainer:after {
  content: "";
  display: table;
  clear: both;
}

.imagecontainer > img {
  max-width: 50%;
  float: left;
}

Of course, this will break if you add more than two images and will only use half of the page width if there's only one. So here comes the second method, which uses grid to fit all the images into the 100% width. Note that this will not work in Internet Explorer without some more CSS and JavaScript work.

Passage:

<div class="imagecontainer2">
  <img src="https://i.imgur.com/8ZSrZ3g.jpg" />
  <img src="https://i.imgur.com/4YxWIdE.jpg" />
  <img src="https://i.imgur.com/UrEK5Up.jpg" />
</div>

CSS:

.imagecontainer2 {
  width: 100%;
  display: grid;
  align-items: start;
  justify-content: stretch;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.imagecontainer2 > img {
  max-width: 100%;
}

In the first case you can also set the "max-width" style on each image depending on how many you have, of course - assuming you know that at the point in passage code.

Comments

Is there a method which would work with images of varying widths?

Incidentally, I am using [img[]] format, would this change anything?

---

I found something, but I still have a question about how it works:

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

When I wrap a line of images with:

<div class="flex"></div>

Then they change size together, but only if they are all links, like:

[img[image.url][passage name]]
or
<<link "[img[image.url]]">><</link>>

If they are just plain "[img[image.url]]" they squish sideways instead of changing size and keeping their ratio, and they change separately from the other images.

Also none of the images change when the window is decreased in height, only when its width is reduced, though this may not be a problem. Apparently "img {max-height:100%;}" doesn't work the same as "img {max-width:100%;}": it messed a lot of other things up.

---

You'd have to be a bit more specific than " work with images of varying widths". The answer already does work with images of varying widths by scaling them down to have the same width, for example.

---

Work with varying widths as in letting them be varying widths, instead of changing their widths. This is because I need them to be the same height, and various widths, all changing size together, without them being squished or stretched.

Using flex lets them be varying widths, and they change size together, staying on the same line, not changing in relation to each other. But it only works with links for some reason; it would make more sense to me if it only worked with images and not links, but it is the other way around.

The images I am using are parts of a larger picture, so they have to stay the same size in relation to each other or it will break the picture. Certain parts of the picture need to be links and the rest not, so I need flex to be able to work with both links and non-link images in the same line if possible.

---

I have a workaround that is working, so the answer to this question will be more for curiosity now. Thank you for your response!

I am using <<linkappend "[img[image.url]]">><</linkappend>> and I put .macro-linkappend {cursor: auto;} in the stylesheet since I do not use this kind of link for anything else in my Twine adventure. Then the images are all links so the inline-flex solution works for them, and the mouse changes to a pointer only over the parts of the picture that do something.