MobileRead Forums - View Single Post

Jellby · 12-31-2009, 04:40 AM

I'd try "max-width:100%; max-height:100%;". That should work (if the relative height works), but won't enlarge images, just reduce them if needed.

If you want to resize in any direction, I believe you have to use an SVG wrapper:

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.png" />
</svg>

In viewBox and the <image> element use the image's pixel dimensions (not compulsory, but easier to manage). The key part is the preserveAspectRatio="xMidYMid meet" property.

12-31-2009, 04:40 AM	#2
Jellby frumious Bandersnatch Posts: 7,550 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I'd try "max-width:100%; max-height:100%;". That should work (if the relative height works), but won't enlarge images, just reduce them if needed. If you want to resize in any direction, I believe you have to use an SVG wrapper: Code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <image width="600" height="800" xlink:href="images/Cover.png" /> </svg> In viewBox and the <image> element use the image's pixel dimensions (not compulsory, but easier to manage). The key part is the preserveAspectRatio="xMidYMid meet" property.