Image formatting without stretching

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.

DMSmillie · 02-25-2011, 01:50 AM

I think what you're looking for is preserveAspectRatio="xMidYMin meet", or possibly preserveAspectRatio="xMidYMid meet".

Specifying something other than "none" ensures that uniform scaling is used for the image height (Y) and width (X).

"xMid" will center the image horizontally in the available viewing area.
"YMin" will position the top of the image at the top of the available viewing area, or "YMid" will center the image vertically in the available viewing area.

The "meet" parameter scales the image such that
a. the aspect ratio is preserved.
b. the entire image is displayed.
c. the image is scaled up as far as possible while still meeting the first two conditions.

For more info on the preserveAspectRatio attribute, see http://www.w3.org/TR/SVG/coords.html...RatioAttribute

Vanguard3000 · 03-04-2011, 01:15 AM

Hmm, that seems to be working so far - provided I also set the "viewbox" "height" and "Width" attributes to match exactly the dimensions of the image.

Also, it seems to want to display the image by itself of the "page" on my reader. Is there any way to fix this so that it can be shown with the text of the story.

If you've ever read Harlan Ellison's "I Have No Mouth and I Must Scream" you'll know that between "scenes" is an image depicting a band of computer code, which acts as a break between the scenes. I'm trying to get these to show properly, and simply putting them in as images makes them too wide, and using the "svg" method makes it appear on its own page.

02-24-2011, 05:14 PM	#1
Vanguard3000 Groupie Posts: 152 Karma: 474196 Join Date: Jan 2011 Location: Ottawa Device: Kobo Aura H2O	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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[KOBO] Strip existing formatting to apply my own default formatting to all books	digital_steve	Calibre	2	08-10-2010 06:34 PM
Calibre and FORMATTING how to stop it altering my formatting?	nerys	Calibre	37	07-23-2010 02:35 AM
Calibre and FORMATTING how to stop it altering my formatting?	nerys	Calibre	0	02-28-2010 04:51 PM
line formatting formatting question	daesdaemar	Workshop	9	02-06-2009 11:47 AM
"Stretching crystals promises flexible colour displays"	jharker	News	13	09-05-2007 12:03 PM

02-25-2011, 01:50 AM	#2
DMSmillie Enquiring Mind Posts: 562 Karma: 42350 Join Date: Aug 2010 Location: London, UK Device: Kindle 3 (WiFi)	I think what you're looking for is preserveAspectRatio="xMidYMin meet", or possibly preserveAspectRatio="xMidYMid meet". Specifying something other than "none" ensures that uniform scaling is used for the image height (Y) and width (X). "xMid" will center the image horizontally in the available viewing area. "YMin" will position the top of the image at the top of the available viewing area, or "YMid" will center the image vertically in the available viewing area. The "meet" parameter scales the image such that a. the aspect ratio is preserved. b. the entire image is displayed. c. the image is scaled up as far as possible while still meeting the first two conditions. For more info on the preserveAspectRatio attribute, see http://www.w3.org/TR/SVG/coords.html...RatioAttribute

03-04-2011, 01:15 AM	#3
Vanguard3000 Groupie Posts: 152 Karma: 474196 Join Date: Jan 2011 Location: Ottawa Device: Kobo Aura H2O	Hmm, that seems to be working so far - provided I also set the "viewbox" "height" and "Width" attributes to match exactly the dimensions of the image. Also, it seems to want to display the image by itself of the "page" on my reader. Is there any way to fix this so that it can be shown with the text of the story. If you've ever read Harlan Ellison's "I Have No Mouth and I Must Scream" you'll know that between "scenes" is an image depicting a band of computer code, which acts as a break between the scenes. I'm trying to get these to show properly, and simply putting them in as images makes them too wide, and using the "svg" method makes it appear on its own page.

Advert