View Single Post
Old 03-07-2017, 04:02 AM   #3
GrannyGrump
Obsessively Dedicated...
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 3,229
Karma: 35158061
Join Date: May 2011
Location: PA {back in the usa!}
Device: Sony PRS-T2, ADE on PC
@ Dion --- now, BE CAREFUL with that phrase "fill the screen". People say that all the time, but they never stop to explain --- your image will fill the screen in the *longest dimension*. It will NOT fill the screen all the way around, to all four edges, UNLESS the image just *happens* to be the exact same aspect ratio as the device screen. Otherwise, you will have, for example, white borders along the sides if the image is tall and narrow.
Or, UNLESS you don't "preserveAspectRatio", and then the image distorts.

Novice bookmakers can get confused when they see "fill the screen", and wonder why their images have white borders along the sides, or along the top & bottom. (I throw this out there in remembrance of my own new bafflements and confusions)

@chaot --- your svg code is missing the setting that will preserve aspect ratio, and keep your image from getting stretched or squashed. If you use "None", the image will distort to match the screen aspect ratio.

Try adding it like this (by the way, Sigil will always *alphabetize* the tags, which I hate, I want them in logical order, not alphabetic. But they work either way.)

Spoiler:
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 900 1300" >
<image height="1300" width="900" xlink:href="../Images/MyImageName.jpg"/></svg>
</div>


If you use "preserveAspectRatio="xMidYMid meet", the image will never get distorted, no matter the size of the device screen. But you will, of course, get borders along the edges that don't meet the screen edge.

Last edited by GrannyGrump; 03-07-2017 at 05:24 AM.
GrannyGrump is offline   Reply With Quote