Log in / Register

Forum › How do I...?

Scaling images to full page

Jellby
Hello,

I've started using Prince XML to convert XHTML files and I have some comments. The first one is how to scale up (or down) an image to fit the page. Consider the following document, which includes the same image (266×400) 4 times:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
@page {
  size: 9cm 12cm;
  margin: 1mm;
}
body {
  prince-image-resolution: 50dpi;
}
img.fit {
  max-height: 100%;
  max-width: 100%;
}
img.wide {
  width: 100%;
}
img.high {
  height: 100%;
}
</style>
</head>
<body>

<img class="fit" src="test.jpg"/>

<img class="wide" src="test.jpg"/>

<img class="high" src="test.jpg"/>

<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 266 400" preserveAspectRatio="xMidYMid meet">
  <image width="266" height="400" xlink:href="test.jpg" />
</svg>
</body>
</html>


It looks like the "height" or "max-height" property of the <img> elements is ignored, the first 3 images are just scaled to maximum width, even if that results in an image higher than the page.

The 4th case uses an <svg> wrapping around the image that should achieve what I want: scale the image up or down to fit the screen. However, it seems Prince is interpreting the percent height in the <svg> as relative to the page width, not height.

Are these known problems of Prince or am I doing something wrong?

Again, Michael day said in an email that "percentage values are generally interpreted relative to the width of the containing element, even if they are specified on a height property". Is this per-CSS-spec or just the way prince works? Even then, though, why are the max-width and width properties just ignored in the first 3 cases?
mikeday
Sorry, I utterly misremembered this bit: "percentage values are generally interpreted relative to the width of the containing element, even if they are specified on a height property" <-- wrong.

The truth is totally different, as described in the spec. A percentage height or max-height will be ignored (treated as 'auto') unless the containing block has an explicitly specified height value. In practice this makes height values rarely useful.

Contributing to the problem is that you can't scale an image based on its height, as reducing the height of the container will just make the image overlap the containing block.

(This should be the way CSS and browsers work, not Prince-specific behaviour. If Prince behaves differently from browsers that may be a bug, and we will investigate it).
Jellby
So... is it not possible to get an image scaled to full page without previous knowledge of the page size and image size?

It seems at least CSS3 would permit that, is this supported in Prince? Could maybe an extension be added to allow reference to the page dimensions (accounting for margins)?

Please see the discussion here.
mikeday
So... is it not possible to get an image scaled to full page without previous knowledge of the page size and image size?

If you know the aspect ratio of the image and the aspect ratio of the page, then you can scale the image appropriately to fill either the page width or height, without distorting the image, even if you do not know the absolute sizes.

If you don't know the aspect ratio of the image or the page, it is impossible to scale the image appropriately, as you don't know if the height will overflow or not.