MobileRead Forums - View Single Post

Pablo · 07-06-2015, 07:53 AM

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:

Code:

 <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

07-06-2015, 07:53 AM	#1
Pablo Guru Posts: 973 Karma: 4999999 Join Date: Mar 2009 Location: Rosario, Argentina Device: SONY PRS-T2, Kindle Paperwhite 11th gen	Scaling images with SVG wrapper 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: Code: <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