Maximize Image Width

[Turtle91]

Originally Posted by Cyberseeker

I cannot attach an svg file, but can you duplicate a 900w x 1076h image in Sigil and make it stretch?

Yes, I do all the time. Most of the cover images I use are 1000ish wide x 1600 tall. They stretch, or condense, to the best fit for the display screen without losing the aspect ratio. If the image is very tall and maxes out the available screen height, then there will be extra space added to the sides so the images aspect ratio doesn't change.

That is probably why your shorter image makes it all the way across and the taller does not.

edit: if you do NOT want to maintain the aspect ratio then you can change the <svg> to:
preserveaspectratio="none"

[Cyberseeker]

Originally Posted by Turtle91

Yes, I do all the time. Most of the cover images I use are 1000ish wide x 1600 tall. They stretch, or condense, to the best fit for the display screen without losing the aspect ratio. If the image is very tall and maxes out the available screen height, then there will be extra space added to the sides so the images aspect ratio doesn't change.

That is probably why your shorter image makes it all the way across and the taller does not.

edit: if you do NOT want to maintain the aspect ratio then you can change the <svg> to:
preserveaspectratio="none"

My images are 900px x 160 px and they stretch across the screen using the code you gave me.

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

However, there is a considerable gap above and below my image. Is there any way to minimize the unwanted white area?

[fbrzvnrnd]

Why you are embedding an SVG inside an SVG?

[Turtle91]

Originally Posted by Cyberseeker

However, there is a considerable gap above and below my image. Is there any way to minimize the unwanted white area?

Again, referencing my earlier post:

The preserveAspectRatio="xMidYMid meet" selection takes care of that. It centers the image using the options: xMidYMid meet.

Check here for a definition of all the SVG terms.

Clicking on the link will take you to the website which describes all the different aspects of the element: preserveAspectRatio

If you fiddle with the yMid, yMin, yMax options you may get something close to what you are looking for but as others have mentioned it's very difficult to do reliably across all devices/apps.

[Cyberseeker]

OK, I've changed yMid to yMin when the image is placed at the bottom, and that helps.

As an aside, is there a way of inserting a 'title' pop up? I tried inserting it between 'height' and 'xlink' but no luck.