Work Text:
Update: AO3 has updated some of its programming and now some images may auto resize. However, if someone downloads your work, that downloaded image will not be automatically sized to fit the screen page. So, I still recommend sizing your images before posting.
So you’ve gone and done all the work required to upload an image into your work on Archive of Our Own. [Note: You must use an external website to host your image. I have had great luck with Flickr and highly recommend that site.]
*See AO3 FAQ->Posting and Editing ->How do I post an image?
On your computer monitor, it looks pretty good. Though it doesn’t quite fit the text.
COMPUTER DESKTOP BEFORE
But then, on a mobile device (which btw is how most readers access the website), you can only see a small portion of the image.
MOBILE BEFORE
Good news! It can be fixed!
Go into your HTML edit on your stories. Look up your script for your images (banners, pictures, illustrations, etc.) It might look something like this:
<p><img src=“http://imagelink.jpg/blah” width =“1024” height = “266" alt=“image”/></p>
*Please note that the numerical value varies from image to image.
Replace the width =“1024” height = "266" to just be: width =“100%".
(Delete the height entirely.)
And voilà your pictures are automatically sized to be the same width as your text both on computer and mobile devices!!!
COMPUTER DESKTOP AFTER
MOBILE AFTER
Also, if you don't want the image to fill the screen, you can change the percentage to a smaller size.
(For this post, I used 100% on the banner image and 75% for the rest of the images.)