Quote:
Originally Posted by ShellShock
This is what I have been experimenting with on my Glo to make images full screen (I am not an expert at this but it seems to work OK):
Code:
<div style="page-break-before:always">
<svg xmlns="http://www.w3.org/2000/svg" width="768px" height="880px" padding-top="20px" preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 768 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="768" height="1024" xlink:href="../Images/map.jpg"></image>
</svg>
</div>
svg width="768px" is the Glo's screen width. svg height="880px" is the Glo's screen height minus a bit for the bottom menu, and a bit more because I have a 20px padding at the top (padding-top="20px") so the image is not right at the top of the screen.
preserveAspectRatio="xMidYMid" positions the image in the middle of the screen.
The viewBox is the user defined coordinate system this can be pretty much whatever you want as long as the aspect ratio is reasonable. To keep things simple I have used the Glo's screen resolution. The image width and height are then the same as the viewBox width and height, so the image fills the viewBox.
|
I'd use the image size and not the screen size in your code. The sample should work across any device as the image would be scaled to full page less any defined margins.
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 660 880" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="880" width="660" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
Strictly speaking some of the code may not be needed since (I vaguely remember), xMidYMid meet is the default for preserveAspectRatio. The width and height 100% says to use the full screen so the viewbox will be scaled to that size. Some interesting effects can be obtained if you muck with the viewbox and image measurements.
Sample is from a map in an ebook I'm reading. It displays full screen on a Glo and an Aura.
BTW, the Glo is 1024 x 758 not 768. Ask eInk why that decision was made.
Regards,
David