[mmat1]

Originally Posted by bentleymaniac

So, I tried it on my Kobo Glo HD, and was majorly disappointed.
The images display at about a quarter the size of the screen, (1/2 width and 1/2 height), and they have massive page breaks before and after.

What I'm really trying to do is have the image float slightly, so that it displays full screen (on every device) at the next page turn after a particular referenced point in the text. So, for instance, you have the description of an event happening, and the next page turn gives you the illustration full screen, then the next page turn back to text WITHOUT having three quarters of the page before the illustration blank because the image is forced in a particular spot in the text.

Any ideas? I'm stumped.

hi.
I edited your code a bit and deleted some stuff. try

div.inline {
	page-break-inside:avoid;
	text-align:center;
}

div.inline
	img {
		max-height:100%;
		width:100%;
		max-width:100%;
	}