Limit images to be resized

[rubeus]

Hi,

over the time the resolution of ebook devices increased from 800x60 too full HD and even more (retine displays)

What resolution should an image have? An image having a gootd resolution for 800x600 looks like a stamp on hires screens. If you assign a proportonal width like 90% may lead to a resizing where the displayed image is oversized. it looks ugly - especially indexed images. So the ideal formatting would resize the image proportional, but stop the image to be scaled larger than it is. Im archiving this by using these css rules:

div.cimg {
  width: 100%;
  text-align: center;
  margin: 1em 8px 1em 8px;
}

div.cimg img {
  width: 100%;
}

div.cimg + p {
  text-indent: 0;
}

This will center the image, make a margin around it, scaling the image to fit on the screen and set the indentation of the following paragraph to zero.
But it will not prevent the image to be resized larger than it is. This is done by adding the max-width style to the img rule. As the width of an image varies from image to image a special css rule is necassry for each image - or each image needs to have the same resolution.
To solve that the max-width style can be apllied to the img element:

  <div class="cimg">
    <img alt="" src="../Images/img07.png" style="max-width: 520px"/>
  </div>

Now the image will be resized according to the screen size but this will stop at 520px, the width of the image itself.
Still this is very time consuming even with a snippet as the snippet cant retrieve the image resolution.

The Plugin below will go through every text file and will add the maxwidth style te every img element. Existing styles will be kept, if there is already a max-width style the value will be checked and corrected if necessary.
I'm new to Python, especially to PIL and BS4, so i gave the version 0.0.1. Use at your own risk and always have a backup

This plugin wouldnt exist without the help of Doitso and KevinH.

Every comment to improve is welcomed.

Requirements: Sigil 0.9.1 with internal Python enabled. The Plugin is not 2.7 enabled.

[Jellby]

You can specify sizes in absolute units (cm, in, mm... even px are supposed to be absolute units, not physical pixels).

But I think what you are after is simply "div.cimg img {max-width:100%}". That should show the image at its "natural" size, but resize it down to 100% if it's larger.

Originally Posted by rubeus

To solve that the max-width style can be apllied to the img element:

  <div class="cimg">
    <img alt="" src="../Images/img07.png" style="max-width: 520px"/>
  </div>

Now the image will be resized according to the screen size but this will stop at 520px, the width of the image itself.

Wrong. "px" are absolute units 1/96 inches, if I remember correctly, so it won't prevent the image to be magnified if the device resolution is higher than 96ppi.

[rubeus]

Originally Posted by Jellby

But I think what you are after is simply "div.cimg img {max-width:100%}". That should show the image at its "natural" size, but resize it down to 100% if it's larger.

All that effort for nothing....

Why didnt you tell this in before?

Originally Posted by Jellby

Wrong. "px" are absolute units 1/96 inches, if I remember correctly, so it won't prevent the image to be magnified if the device resolution is higher than 96ppi.

On my devices it is stopping and i'm pretty sure that a 520px width image will use only 520 px regardless what dimensions a pixel has. On my full hd tablet a 520px image is round about a quarter of the screen width having 1920px...

At least i will check my old Sony 650 but as ADE 2 is displaying the image correctly i have no doubt about.

Well, at least theres only a learning effect for me...

[Jellby]

One thing is what the CSS 2.1 and CSS 3 specs say, another thing is what ePub readers actually do (note that ePub 2 is based on CSS 2, not 2.1, so the px definition is a bit more ambiguous). I have seen readers say "10cm" was something like 8.5 cm, and that an A4-sized PDF displayed to fit the 6" screen was at "100%"...