MobileRead Forums - View Single Post

Vanguard3000 · 02-24-2011, 05:14 PM

I'm going through a lot of my books right now, trying to properly format images (maps, etc) so that they will fill at least one whole dimension of my Kobo's Screen (i.e. so that a "wide image will fill the entire width of the screen, while a "tall" image will fit the entire height of the screen), without making it "stretch" the other dimension to fit as well.

So far, I've been using:

Code:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 837 1186" width="100%">
      <image height="1186" width="837" xlink:href="../Images/cover.jpg"></image>
    </svg>

for my cover images, which is fine, because the image is generally more or less the same dimensions as my Kobo's screen, but obviously, if I were to use this code to add in a wide image like a stylized page break or a wide-but-short map, or a tall, thin one like a chart or table, it will improperly stretch the image.

I'm guessing the "preserveAspectRatio="none"" bit has something to do with it, but I don't know what kind of modifiers I can substitute the "none" with, or how they would work.

In a nutshell, I want to be able to add an image so that it will automatically enlarge the image, while preserving the aspect ratio, until two of the sides reach the edges of the screen (right and left, or top and bottom).

Thanks in advance for any help.

02-24-2011, 05:14 PM	#1
Vanguard3000 Groupie Posts: 169 Karma: 474196 Join Date: Jan 2011 Location: Canada Device: Kobo Libra 2	Image formatting without stretching I'm going through a lot of my books right now, trying to properly format images (maps, etc) so that they will fill at least one whole dimension of my Kobo's Screen (i.e. so that a "wide image will fill the entire width of the screen, while a "tall" image will fit the entire height of the screen), without making it "stretch" the other dimension to fit as well. So far, I've been using: Code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 837 1186" width="100%"> <image height="1186" width="837" xlink:href="../Images/cover.jpg"></image> </svg> for my cover images, which is fine, because the image is generally more or less the same dimensions as my Kobo's screen, but obviously, if I were to use this code to add in a wide image like a stylized page break or a wide-but-short map, or a tall, thin one like a chart or table, it will improperly stretch the image. I'm guessing the "preserveAspectRatio="none"" bit has something to do with it, but I don't know what kind of modifiers I can substitute the "none" with, or how they would work. In a nutshell, I want to be able to add an image so that it will automatically enlarge the image, while preserving the aspect ratio, until two of the sides reach the edges of the screen (right and left, or top and bottom). Thanks in advance for any help. Last edited by Vanguard3000; 02-24-2011 at 11:52 PM.