Fun With Graphics: Make Your Images Fit The Screen

For those of you who are whizzes at computer stuff and html and css, do not laugh at my puny efforts. Go look at this video of great social significance instead. I’m talking to the folks like me–who believe our computers are plotting against us when we’re not looking.

You all know that ereaders can play havoc with your graphic images, right? Depending on the device, they can shrink or expand or get cut off in inconvenient ways. The way to make sure your images stay the size you want them to is define the size in the coding. So a line of html for a scene break glyph might look like this:

graphic8

I needed to insert a graphic that ideally should fill the screen, no matter what size screen was displaying it. I knew how to do this thanks to Paul Salvette (and if you are really serious about formatting ebooks, you must get his book for your resource library) and my partner-in-obsessanating Jon Westcot. Change the size to a percentage–in this case I needed the width to always be 100% of the screen.

graphic7Do that and the image will expand or shrink depending on the screen size. Never have to worry about it being cut off.

That’s when it hit me I could do something cool with chapter heads and scene break indicators.

I had a project with a noir-ish theme and I made graphics with a grayscale fade. The problem with locking the image sizes, though, was that on some screens the fade effect was lost and the graphic looked like a block–too graphic-y. That’s when it hit me that I could use percentage coding to make the graphic fill the screen width no matter what size the screen–even a full-sized computer screen.

graphic5How it looks on the Kindle Previewer for the iPhone app–a very small screen.

graphic6How it looks on the iPad screen–very wide display.

I also did the same with the scene break indicators. For this series I wanted a simple grayscale fade line instead of a glyph, but I wanted to always fill the entire line. Setting the width at 100% did exactly that. Here’s how it looks on Lucy Light the Paperwhite.

graphic2If you happen to have an image you want to fill an entire screen, top to bottom, you use the same trick, except you set the height at 100%. That way you can manage the size of your graphics, but still make sure your book illustration or chart gets its own screen “page.”

Nifty trick, eh? Thanks, Paul and Jon.