Scaling images to mobile devices

Authoring Twine
,
1

Twine Version:
Twine2 Harlowe 3.3.7

Hi,
I’m trying to scale the images within my story so that they fit on both mobile and desktop screens. Currently, the images don’t scale at all to any size screen.

I tried inserting:

tw-passage <style> img {
  max-width: 100%;
  max-height: 100%;
}

Into my stylesheet and it has made no difference to the image scaling on mobile.
Following a suggestion, I also tried inputting:

 <style> img {
  max-width: 100%;
  max-height: 100%;
}

above images directly into a passage but when I play-tested it removed everything from the passage except the background.

Is anyone able to tell me what I’m doing wrong or offer a solution please?
Thank you.

1 Like
2

I think you don’t need <style> there, and I also think you need to set one of your dimensions to auto. For example, using the testing functionality here:

When I set both max-width and max-height to 100% like you have here, the scaled-down image looked like this:

An image showing the above CSS markup and its output. The test image styled by the CSS is squashed horizontally.
An image showing the above CSS markup and its output. The test image styled by the CSS is squashed horizontally.537×546 71.7 KB

But when I replaced max-height with height and set it to auto, it scaled properly:

An image showing the above CSS markup and its output. The test image is scaled down at its original aspect ratio.
An image showing the above CSS markup and its output. The test image is scaled down at its original aspect ratio.525×545 90.3 KB

4 Likes
3

As @EJoyce said, you shouldn’t have <style> in those styles, that’s an HTML element, not a CSS selector.

That said, all you probably need is a max-width:

tw-passage img { max-width: 100%; }

Images automatically retain their aspect ratios (unless you specify otherwise), so the height of the image will scale appropriately.

2 Likes
4

Thank you both very much - it’s now working perfectly!