Actions

Work Header

How To Make Images Fit In Mobile Browsers

Work Text:

While AO3 hasn't officially provided a means to host images within written works, many users have already implemented posting fanart/mood boards with their stories or even posted art pieces separately. However, one complaint I hear often is how these images are not resized for mobile viewing and require readers to scroll horizontally to see the image. What do I mean by this? Well, let's let look at the example image I've created I know, I know, it's an artistic masterpiece.:

Most desktop browsers will show this 700x500 image no problem. However, when we look on mobile browsers, it's another story:

If it's not obvious, on mobile browsers (at least in Chrome and Safari when I tested it), the image is cut off. To see the full image, you have to scroll horizontally back and forth. To be fair, since AO3 doesn't officially sanction the use of outside images, they can't really make it so all images are mobile friendly. But we can by using a work skin!

HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:

#workskin .mobileimage {
  width: 700px;
  max-width: 100%;
}

PLEASE NOTE: In the skin, I put width as 700px because that's the width of the example image found in this tutorial. HOWEVER, if your image is a different width, you MUST change the width amount in the skin accordingly, e.g. width: 650px, width: 576px, etc. Also, if you have multiple images of differing widths, you must change it for each image, but more on that later.

Hit "Submit" (or "Update" if adding to a previous work skin), and now to implement it in your work.

Go to your the work where you want to use the skin , and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and the basic code is the following:

<img src="IMAGE URL" class="mobileimage">

When we do that to our example image, we get the following, which looks the same on desktop:

But on mobile we can now see the entire image in the browser:

Now, because you're using code to resize the image rather than resizing it in an image editing program, the quality of the image may be affected. But to be honest, I've used this method on multiple images and haven't noticed that much of a degrade, so I think it's fine.

As for the multiple images I mentioned earlier, you have to make a section for each image in your workskin. For example, the screenshot of the mobile browser in this tutorial is a width of 456px, so my work skin for this live example is this:

#workskin .mobileimage {
  width: 700px;
  max-width: 100%;
}

#workskin .mobileimage2 {
  width: 456px;
  max-width: 100%;
}

And the code in the Work Text for the mobile browser image is the same as the other, just with the class as class="mobileimage2"

NOTES

- Like other work skins, this won't work on downloaded works or ones where the creator's style is turned off.

- You need both the width and max-width, because while having just the max-width: 100% will fix the mobile issue, it also means it will stretch your image to fit the desktop browser.

- If you liked this, please leave a comment or at least a kudos? As always, if you have any questions or concerns, you can leave a comment here or send me a message at my AO3 skin tumblr, To Skin a Fic.