Kobo: images in epubs are tiny!

[Quoth]

Originally Posted by JSWolf

On a Kindle, you can use negative margins to be able to use more of the screen.

For personal use, not distribution.

[Phssthpok]

Originally Posted by Quoth

You can't fill the screen width on a Kindle as there is a fixed minimum margin.
Correctly done epub css will fill the width on most epub systems at width: 100%; height: auto; if the image isn't too tall.

This is on a Kobo, and the image is only about 200px in height.

[Quoth]

Originally Posted by Phssthpok

This is on a Kobo, and the image is only about 200px in height.

Then the CSS or enclosing HTML/CSS is wrong. Make sure height: auto; when width:; <any>%; and that no other CSS/HTML is overriding that. I don't have ANY other enclosing html for <img than a <p class="draw-centre"> that sets zero left and right margins, zero left & right padding and text-align: center; The top & bottom margins as desired. I only have non-zero padding-top for any entity at the start of a file (as margin-top will then be ignored on many renderers).

No margin: auto; anywhere.

[JSWolf]

Originally Posted by Quoth

Then the CSS or enclosing HTML/CSS is wrong. Make sure height: auto; when width:; <any>%; and that no other CSS/HTML is overriding that. I don't have ANY other enclosing html for <img than a <p class="draw-centre"> that sets zero left and right margins, zero left & right padding and text-align: center; The top & bottom margins as desired. I only have non-zero padding-top for any entity at the start of a file (as margin-top will then be ignored on many renderers).

No margin: auto; anywhere.

Does auto need to be used? I don't use auto and I don't have a problem with images.

[JSWolf]

Originally Posted by Phssthpok

This is on a Kobo, and the image is only about 200px in height.

Depending on the aspect of the image, I would make the height to 100%. For example, the cover.

I set img so it doesn't go off the screen. I don't use auto and I don't need it. It's just unneeded code.

img {
  max-height: 100%;
  max-width: 100%;
}
.height {
  text-align: center;
  text-indent: 0;
  height: 100%;
}
.width {
  text-align: center;
  text-indent: 0;
  width: 100%;
}

[Quoth]

Originally Posted by JSWolf

Depending on the aspect of the image, I would make the height to 100%. For example, the cover.

I set img so it doesn't go off the screen. I don't use auto and I don't need it. It's just unneeded code.

The cover is about the ONLY thing were you set both 100% and only if you you don't care about aspect ratio.

If it's a square to landscape shape image (and likely portrait images not taller aspect than screen aspect) the height is auto if setting width and this maintains aspect ratio. It's not extra or unneeded code. A cover is a special case.

[JSWolf]

Originally Posted by Quoth

The cover is about the ONLY thing were you set both 100% and only if you you don't care about aspect ratio.

If it's a square to landscape shape image (and likely portrait images not taller aspect than screen aspect) the height is auto if setting width and this maintains aspect ratio. It's not extra or unneeded code. A cover is a special case.

You should never use width and height both at 100% for the cover. Only use height of 100%. You would easily screw up the correct aspect ration.

In your 2nd example, the height is automatically auto if it's not specified. So setting height to auto is excess code that's not needed.

For example, when I do the code for the cover and the titlepage image, I do not set width to auto and I've never had a problem.

If the image is going to be too small even if the width is 100% such as a map, I rotate it so I can then set the height to 100%. Given it's on my Libra 2, I can just rotate my L2 to see the image right side up. I know that should not be done for a book for sale, but for your own use, it's perfectly acceptable.