epub image displayed only partial

[mclien]

Hi there,
I own an old Trekstor Pyrus mini.
Sadly I have book with some images/ graphics, which won't display completely. Only the left half of the image is shown and the rest is cut of.
Changing the font size or rotating the book to landscape won't help.

Is there a way to re-edit the epub file directly?

EDIT.
Sorry, my bad, seems to be a problem of the reader. Calibre scales it correctly.

So, I guess it's something about the settings of the epub format. It seems calire has some settings to change settings, like I can convert the book from one epub format to another. Any hints on that?

[Turtle91]

Sometimes newer devices/apps (like Sigil or Calibre) better support ePub/html coding standards and are able to properly display an image that older devices can't handle. Most of the time that would require "dumbing down" the code so that it works with those older devices. Without seeing an example of the CSS/HTML used in the book, we can't be sure and can only guess at what could be the problem.

Can you open the epub in Sigil, or Calibre editor, and copy the section with the image html, and the associated CSS?

[mclien]

<p class="Body-text-no-paragraph1"><span class="CharOverride7">Connection</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p><img alt="" class="calibre3" src="../Images/1connection.png"/>

.calibre3 {
height: auto;
width: auto
}

the readers screen resolution is 600x800 (withxhight)

Some images are 596x439 which nearly fit (the margin subtracts 5+5 pixels)
some are 962x586 (or even 1553x1186)

so I guess, i have to change the "auto" in the css to something else?

[Turtle91]

Some devices might hang up on not having a surrounding tag around the <img>....a bare <img> might not work properly. Also, I wouldn't apply 'auto' to both (or either) height/width. If you define both height/width you may lose the proper aspect ratio and the image could look stretched or scrunched.

Try this, and see if it helps:

.image     {width:95%; margin:2em auto}
.image img {width:100%; max-width:586px}

<p>...</p>
<div class="image"><img alt="" src="../Images/1connection.png"/></div>

The width:100% will make the image fill the width of the container (the <div>) which is set to center on the screen and fill 95% of the width of the screen. The image height will be auto set to display the correct aspect ratio. I also add the max-width set to the width of your image. While it's not technically a direct 1:1 between max-width pixels and image-width pixels, this helps in preventing small resolution images from getting overblown and fuzzy.

[JSWolf]

Originally Posted by mclien

Hi there,
I own an old Trekstor Pyrus mini.
Sadly I have book with some images/ graphics, which won't display completely. Only the left half of the image is shown and the rest is cut of.
Changing the font size or rotating the book to landscape won't help.

Is there a way to re-edit the epub file directly?

EDIT.
Sorry, my bad, seems to be a problem of the reader. Calibre scales it correctly.

So, I guess it's something about the settings of the epub format. It seems calire has some settings to change settings, like I can convert the book from one epub format to another. Any hints on that?

In the CSS, add the following code...

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

[Turtle91]

Originally Posted by JSWolf

In the CSS, add the following code...

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

I have that in my personal css file as a catch-all in case I don't specify a max-width for a particular image. I have it near the top of the css file, so any styles added later would take priority over it. Don't forget to add the '-' in max-width.

In this particular case, however, it doesn't serve a useful purpose. You've already set the width at 100%, so max-width of 100% means nothing....and if you set the max-width to roughly equal the image width, then you are covered from the fuzzy/stretched image syndrome.

The max-height isn't sufficiently consistently implemented among all the readers/apps. It is defined in the standards as the "height" of the container...but what does that mean in real life? The height of the screen, the height of the div, the height of the chapter, or the height of the reflowable scrolling window that is 69 'pages' long? It's OK to have it in there, but I'm not sure if it helps all that much.

[mclien]

@Turtle91
sadly no change.

EDIT:
I'm thinking about the "dirty way". rescale the images and replace them.

EDIT2:
Did a quick test with one image. At least that's working and it's only 4-5 images...