CSS Style Question

[Enterio]

I'm using the scrolling view mode of the Calibre viewer, with

body.calibre-viewer-scrolling { margin-left: 300px !important; margin-right: 300px !important; }

for right and left indents.

However, the images included in the epub appear very small with an ident of their own—even though through the View Image function they are of very large size. I tried using the code:

body.calibre-viewer-scrolling.img { width: 100%; !important; height:100% margin-left: 0px !important; margin-right: 0px !important; }

to try and make the images as big as possible, without any solution, as the images are unchanged and still small. Is there an easier way / option of keeping the native size of included images, to ignore the margins for the text in the case of images, in CSS code?

Thank you!

[kovidgoyal]

Use the inspector tool to check what CSS is applied to the image to figure out why it is displayed small.

[Enterio]

While using the inspector, i found out that the epub had fixed image resolutions assigned to each image.

<img height="337" width="480" src="../Images/image03297.jpeg" alt="" data-calibre-src="OEBPS/Images/image03297.jpeg">

And the images are contained in a paragraph with margins assigned.

 <p class="image">

How can I override both the fixed image sizes and my 300px left and right indent, to ignore them both, and make the picture as big as possible (only in flow mode). If not, at least, how can I make calibre ignore all the height and width dimensions assigned to each image? Does the (!important) CSS mark help in any way? I'd like this override be applied to every epub.

[kovidgoyal]

Add !important like this

img { width: 100vw !important; }


note the semi-colon comes after important not before it

[Enterio]

This stretches the images to the full screen, which is not what I wanted.

I'd need the images to ignore all the inheritance rules before them, and set them to:

width:auto !important; height:auto !important;

since I can't determine in CSS and HTML the normal height and width of the embedded images?

Also, could there be an option to save the assigned style modifications as a part of each book? (i.e., when I open Book (1) I'll have style (1) and when I open Book (2) I'll have Style (2)), or is that too hard to implement?

Thank you for your support!

[kovidgoyal]

So do that. You can put whatever styles you want. And if you want to modify styles per book then do an EPUB to EPUB conversion and use the extra css setting in the conversion dialog to do that.