View Single Post
Old 05-21-2022, 08:34 AM   #13
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,375
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I hesitated to enter the conversation earlier... the image solution I use works very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy.

SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it.

You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you.

If you're manually entering it: put the image on it's own xhtml page and use the following code:
Code:
<body>
  <div>
    <svg 
	xmlns="http://www.w3.org/2000/svg" 
	height="100vh" width="100vw" 
	preserveAspectRatio="xMidYMid meet" version="1.1" 
	viewBox="0 0 800 1100" 
	xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="800" height="1100" xlink:href="../Images/SampleImage.png"/>
    </svg>
  </div>
</body>
You will need to put the image dimensions in the appropriate places (image height in the red area, image width in the blue area) and the image location/filename in the green area.

I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there! Find the happy medium.

Cheers!
Turtle91 is offline   Reply With Quote