Image max-width imposed automatically in Calibre eBook viewer

[aunk05]

I have converted a .pdf to an .epub which looks perfect in the Calibre eBook editor. However, when I open it in the VIEWER, each image has some max-width value imposed on it, squishing it down to some fraction of its intended width.

When I open the inspector and edit the "style" element so that max-width is set to either "none" or "100vw", the image is again correct - until I close the inspector, when it is immediately squished again.

To re-iterate: the file looks fine in the editor. The images are only altered in the viewer.

What is happening here, and how can I stop it?

[kovidgoyal]

In paged mode all images have a max width otherwise they will appear cut off. Use the viewer in flow mode and you wont have that issue.

[aunk05]

Thank you so much, Kovid - that has worked perfectly, although I really still do not understand the logic behind this.

[JSWolf]

Put the following CSS code in your ePub's CSS and you won't have a problem.

CSS

img {
  max-height: 100%;
  max-width: 100%;
}

[aunk05]

Yeah, I tried that after looking through this forum and Reddit. See attached image - is this what you mean? It does not have any effect.

[aunk05]

Thank you for the response. Please see image above. Is this what you have in mind?

I read similar advice on this forum and also in Reddit. Doing this, and such variants as max-width:none or max-width: 100vw had no impact.

[theducks]

Originally Posted by aunk05

Thank you so much, Kovid - that has worked perfectly, although I really still do not understand the logic behind this.

Look at the 'Box Model' description at W3C.
Our books are built out of boxes of text / images within bigger boxes.
The Top Outermost Box is the BODY, not the viewing window
The Inspector tool in the Calibre Editor, shows the current Box parameters as inherited. Every P, H#, Div has one that is the result of the CSS applied (there many more layers than just these.
In many cases, some of the parameters are 0, by most usage.
The Border is not visible.
Margin is the most common we use.
Remember, each Box, has all these.

This is why, changing the viewing mode affects what you see and what CSS have control.
Scroll is 1 long page (just not all visible unless you have a really TALL monitor )

[aunk05]

I hope this post will have the image of the css code I used, as mentioned in an earlier post. I don't know why my image link didn't work.

[JSWolf]

What I had in mind was putting that CSS code in the CSS of the eBook. That way it should also work if you are not reading with calibre's viewer.

[DNSB]

Originally Posted by aunk05

I hope this post will have the image of the css code I used, as mentioned in an earlier post. I don't know why my image link didn't work.

Your image link did not work since to show an image on a external site, MobileRead proxies the connection. Quite a few image sites no longer allow proxied connections for third parties to view their content so that capability is becoming less than useful. Using images as attachments to the message is both more reliable and more likely to be useful in a couple of years when the image site has long since dumped your image.

The image connection for your IMG link is https://usercontent.mobileread.org/proxy/lSf9WACZpxWqm4KdlKPFC92aaQ0/aHR0cHM6Ly9pYmIuY28vVmN6MGhiNlk#https://ibb.co/Vcz0hb6Y.