proper image scaling

3 posts / 0 new
Last post

Hi all,

I have done some testing of image scaling and found one interesting point.

When scaling pictures for non Amazon devices, this is sufficient:

figure.width75 { width:75%; text-align:left; }
figure.width75 img { max-width:100%; }

For mobi and kf8 it is necessary to use only width instead of max-width (it is ignored by kindles). The interesting point is (my suspition) that in case of pure width the percentage is counted as a part of CONTAINING element, i.e. the figure container. In case of max-width, the percentage is counted as a SCALE of the image itself.

When I am testing it, whilst using pure width and resizing the reader window, the image exceeds it’s own maximal width. Whilst using max-width, it stops on it’s original size.

The max-width attribute overwrites width; but it is described like the width, as a width TO FIT the container. Well, how is that possible? (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)

I would understand it could be possible to take original image’s size and hard code it attribute by attribute (image by image) but in the case of percentage, I am a bit confused.

Well, an xhtml:img element is from the CSS point of view replaced content, the image replaces the element. Without CSS the dimensions need to be extracted from the file, what is typically simple for raster images.
For SVG the dimensions can be given in different units, including percentage, to determine the size within the XHTML-content can be a little bit more complex, especially because the height
of the SVG can be 100% as well, causing trouble, if the containing element has no defined CSS:height, often viewers fail here to get everything completely right, even or especially, if the
containing element has a defined height.

From the CSS point of view elements around the XHTML:img are either block or inline elements. The width (and maybe the height) can be given by the author. If not, the width is typically 100% of the parent document (maybe some padding, margin, border has to be substracted). Percentage given for the width of the XHTML:img by CSS are relative to the size of the parent, if this has such a width. max-width and width combined are typically used with
different units to indicate some restriction:
img.sampleclass {width: 20em; max-width: 50%; height: auto}
This means, if 20em is smaller than 50% of the parent, the width is 20em, else it is 50% of the parent.
height: auto can be relevant to ensure, that viewers respect the intrinsic aspect ratio of the image, if it has one (not all SVG images need to have this, if this applies, better to provide information about the intended height).

figure.width75 { width:75%}
means roughly, that such a block element figure has a width of 75% of the parent block element,
but because figure is a new HTML5 element, some viewers might not yet know this, in such a case the typical interpretation is that of an inline element, that means, the width is determined by the content and the given property of 75% is not relevant, in doubt add 'display: block' to make it relevant.
Note that for viewers knowing figure, there can be additional default styling.

figure.width75 img { max-width:100%; }
For raster images, if the intrinsic width is larger than 100%, of the figure element, 100% of the
width of the figure element is used, else the intrinsic width of the image. This means, the intrinsic width taken from the image is used like a presentation attribute, equivalent to a low priority information for the CSS:width property.
The situation can be slightly more complex for SVG images, because those have advanced information about the behaviour of the image.

Those kindle format is proprietary, not directly related to XHTML, SVG, CSS, therefore not sure,
which part of it they convert to their own tag soup and which part they ignore, they ignore several relevant XHTML elements and attributes as well.
Concerning EPUB, you can simply look into the CSS recommendation to learn, how width and max-width are correctly interpreted.

thank you.....

Secondary menu