Scaling images with SVG wrapper

[Pablo]

I'm formatting a book that includes some images for my Sony PRS-T2.

One of the images is 755(W) x 476(H) pixels. I want to scale this image so that it fits in the width of my screen (600 pixels), preserving the aspect ratio, using only the necessary screen space (not the whole screen), with a SVG wrapper:

 <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 755 476" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="476" width="755" xlink:href="../Images/fig03.gif" /></svg>
  </div>

The above does the job, but uses the whole screen. How should I modify it? Is it possible?

The idea is to keep the original image size, so that it can scale well in different devices.

Thanks

[Turtle91]

Your Height and Width settings are at 100%. If you want to take up less screen space you need to reduce those. However you are not going to get something that is exactly the number of pixels of your image.
Check out W3Schools SVG tutorial.

I'm not sure why you would need to use SVG though. I would simply insert the image using a div if you didn't want to ttake up the whole screen.

<div class="image1"><img alt="" src="../Images/example.jpg" /></div>

with CSS:
div.image1 {width:100%; max-width:755px} *add whatever styling you want

[Pablo]

Originally Posted by Turtle91

I'm not sure why you would need to use SVG though. I would simply insert the image using a div if you didn't want to take up the whole screen.

I don't know what I was thinking! After I saw your piece of code, I remembered using something similar some years ago in another book. I had a look inside and found this code:

div.im { 
	page-break-inside: avoid;
	margin: 0.2em 0 0.2em 0;
	text-indent: 0;
	text-align: center; }
div.im img { max-width:100%;}

I guess old age is catching up with me...

[Turtle91]

no worries...it gets us all!

One minor difference in my code vs what you had:

I used {width:100%; max-width:755px} so that it takes up the whole screen on small displays, but is limited to the actual width of the image (755px) to prevent stretching and blurring on larger displays.

[Pablo]

Originally Posted by Turtle91

no worries...it gets us all!

One minor difference in my code vs what you had:

I used {width:100%; max-width:755px} so that it takes up the whole screen on small displays, but is limited to the actual width of the image (755px) to prevent stretching and blurring on larger displays.

That's a good one!

Thanks again.