Large images cut off at bottom of screen

Siavahda · 10-30-2026, 05:19 AM

I'm using EPUB, not KEPUB, if that's relevant.

I keep running into the issue that images that are supposed to be full-screen don't display properly on my Kobo - part of them is cut off at the bottom.

For example, in the ebook I'm working on at the moment, this is the code around the image

Code:

<body class="calibre"><div class="th-c05953c3-9671-47dd-a69a-3ea4b352d3a"><div class="fullpage-image"><div class="image-full"><img src="images/0b626394-2be5-4498-a664-f1d38fae45e4.png" alt="image-placeholder" class="calibre1"/></div></div></div>

Here are all the tag settings

Code:

.calibre {
  display: block;
  font-size: 1em;
  padding-left: 0;
  padding-right: 0;
  text-align: justify;
  margin: 0 5pt;
}

.th-c05953c3-9671-47dd-a69a-3ea4b352d3a {
  display: block;
}
.fullpage-image {
  display: block;
  font-family: inherit;
  font-size: 1em;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  height: 100%;
  margin-block: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  max-height: 100%;
  position: relative;
  padding: 0;
  border: currentColor none 0;
}
.image-full {
  display: block;
  font-family: inherit;
  font-size: 1em;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  height: auto;
  margin-block: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  vertical-align: middle;
  width: 100%;
  padding: 0;
  border: currentColor none 0;
}
.calibre1 {
  font-family: inherit;
  font-size: 1em;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  height: auto;
  margin-block: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  max-height: 100%;
  object-fit: contain;
  vertical-align: middle;
  width: 100%;
  padding: 0;
  border: currentColor none 0;
}

The image size is 1600 x 2473.

Can anyone see what the problem is?

JSWolf · 10-30-2026, 09:01 AM

I'm not going to look at your code. I'm going to give you the solution.

HTML

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title>Deadline</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet.css"/>
</head>
<body>
<div class="cover">
<img alt="" class="cover" src="../images/cover.jpg"/>
</div>
</body>
</html>

CSS

Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-height: 100%;
  max-width: 100%;
}
.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}

Siavahda · 10-30-2026, 09:04 AM

Quote:

Originally Posted by JSWolf

I'm not going to look at your code. I'm going to give you the solution.

HTML

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title>Deadline</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet.css"/>
</head>
<body>
<div class="cover">
<img alt="" class="cover" src="../images/cover.jpg"/>
</div>
</body>
</html>

CSS

Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-height: 100%;
  max-width: 100%;
}
.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}

Thank you, but I don't understand why what you're giving me will work when the original code doesn't. The original also has max height and width set to 100%.

I'd like to know what's wrong so I can fix it for myself the next time it comes up.

Siavahda · 10-30-2026, 10:09 AM

To be clear, your solution absolutely worked. But I'd like to know why the original code didn't, if anyone can explain that.

JSWolf · 10-30-2026, 10:14 AM

Here is what works from your code.

HTML

Code:

<body class="calibre">
<div class="fullpage-image">
<img src="images/0b626394-2be5-4498-a664-f1d38fae45e4.png" class="fullpage-image" alt="image-placeholder"/>
</div>

CSS

Code:

.calibre {
  display: block;
  padding-left: 0;
  padding-right: 0;
  text-align: justify;
  margin: 0;
}
.fullpage-image {
  text-align: center;
  text-indent: 0;
  height: 100%;
  max-height: 100%;
}

DNSB · 10-30-2026, 01:35 PM

Quote:

Originally Posted by Siavahda

I'm using EPUB, not KEPUB, if that's relevant.

I keep running into the issue that images that are supposed to be full-screen don't display properly on my Kobo - part of them is cut off at the bottom.

For example, in the ebook I'm working on at the moment, this is the code around the image

Here are all the tag settings

Code:

.fullpage-image {
  height: 100%;
  max-height: 100%;
}
.image-full {
  height: auto;
  width: 100%;
}

The image size is 1600 x 2473.

Can anyone see what the problem is?

Very simple answer is to look at the items I've left from your CSS entries.

Remember that CSS is short for cascading style sheet
Items further down the stylesheet will override earlier items unless you mark tham as !important.
So image-full will override fullpage-image so your image will have the width set to 100% and the height set to auto.

Personally, I prefer to use an svg wrapper for full page images.

Code:

<body class="cover">
  <div class="picWrapper">
    <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/></svg>
  </div>
</body>

Code:

.cover {
  margin: 0;
  height: 99vh;
  max-width: 100%;
  overflow: hidden !important;
}

.picWrapper {
  margin: 0;
  padding: 0;
  height: 100%;
}

.pic {
  display: block;
  margin: auto;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

The CSS is intended to work both for ePub2 and ePub3.

Siavahda · 11-02-2026, 04:13 AM

Quote:

Originally Posted by DNSB

Very simple answer is to look at the items I've left from your CSS entries.

Remember that CSS is short for cascading style sheet
Items further down the stylesheet will override earlier items unless you mark tham as !important.
So image-full will override fullpage-image so your image will have the width set to 100% and the height set to auto.

Personally, I prefer to use an svg wrapper for full page images.

Code:

<body class="cover">
  <div class="picWrapper">
    <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/></svg>
  </div>
</body>

Code:

.cover {
  margin: 0;
  height: 99vh;
  max-width: 100%;
  overflow: hidden !important;
}

.picWrapper {
  margin: 0;
  padding: 0;
  height: 100%;
}

.pic {
  display: block;
  margin: auto;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

The CSS is intended to work both for ePub2 and ePub3.

Thank you both for explaining! But why does image-full will override fullpage-image mess up the image in this case? If the height is set to auto when width is 100%, shouldn't that functionally be the same as setting the height at 100% too?

I like the look of your svg wrapper! I'll try using that going forward when I need to make edits. Thanks!

DNSB · 11-02-2026, 12:46 PM

Quote:

Originally Posted by Siavahda

Thank you both for explaining! But why does image-full will override fullpage-image mess up the image in this case? If the height is set to auto when width is 100%, shouldn't that functionally be the same as setting the height at 100% too?

I like the look of your svg wrapper! I'll try using that going forward when I need to make edits. Thanks!

Cascading... The last entry will override earlier entries in the chain. The width 100% sets the width to 100% and the height auto will simply set whatever height is needed to display the full width without changing the aspect ratio even if that height exceeds the page height. What you would need is something like:

fullscreen_img {
max-width: 100%
max-height: 100%
}

For ePub3, I would use:
fullscreen_img {
width: 100vw;
height: 95vh;
object-fit: contain;
}

The 95vh allows for top and bottom margins which are not removable in most renderers.

Siavahda · 11-02-2026, 02:17 PM

Quote:

Originally Posted by DNSB

Cascading... The last entry will override earlier entries in the chain. The width 100% sets the width to 100% and the height auto will simply set whatever height is needed to display the full width without changing the aspect ratio even if that height exceeds the page height. What you would need is something like:

fullscreen_img {
max-width: 100%
max-height: 100%
}

For ePub3, I would use:
fullscreen_img {
width: 100vw;
height: 95vh;
object-fit: contain;
}

The 95vh allows for top and bottom margins which are not removable in most renderers.

Thank you so much!

JSWolf · 11-02-2026, 03:03 PM

Quote:

Originally Posted by DNSB

Cascading... The last entry will override earlier entries in the chain. The width 100% sets the width to 100% and the height auto will simply set whatever height is needed to display the full width without changing the aspect ratio even if that height exceeds the page height. What you would need is something like:

fullscreen_img {
max-width: 100%
max-height: 100%
}

For ePub3, I would use:
fullscreen_img {
width: 100vw;
height: 95vh;
object-fit: contain;
}

The 95vh allows for top and bottom margins which are not removable in most renderers.

I would use height 100vh. Just as I also use 100% so the height is full screen. Since the OP is using RMSDK, go for height: 100%;

Siavahda · Yesterday, 03:21 PM

Quote:

Originally Posted by JSWolf

I would use height 100vh. Just as I also use 100% so the height is full screen. Since the OP is using RMSDK, go for height: 100%;

All right! Will do. Thank you!

JSWolf · Yesterday, 05:29 PM

@Siavahda...This is what needs to be changed in order to use @DNSB's code.

viewBox="0 0 1000 1500" the 1000 is the width of the image and 1500 is the height of the image.

You also have the edit <image height="1500" width="1000" with the image's dimensions.

And finally, you have to put where the image is twice in href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/>.

DNSB · Yesterday, 05:42 PM

BTW, the reason for using the href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/>" structure is to stop epubcheck/epubveri from emitting a usage error that xlink is not needed for epub3. It will not affect the display of the image in any renderer up to and including one that claims ePub 3.4 compatibility.

Jon, you did notice that my code posted in message #6 in this thread had the dual image links?

JSWolf · Yesterday, 06:50 PM

Quote:

Originally Posted by DNSB

BTW, the reason for using the href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/>" structure is to stop epubcheck/epubveri from emitting a usage error that xlink is not needed for epub3. It will not affect the display of the image in any renderer up to and including one that claims ePub 3.4 compatibility.

Jon, you did notice that my code posted in message #6 in this thread had the dual image links?

Yes I did. That's why I highlighted both image references in my post saying what needs to be changed to use your code.

Yesterday, 05:29 PM	#12
JSWolf Resident Curmudgeon Posts: 85,529 Karma: 154365185 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	@Siavahda...This is what needs to be changed in order to use @DNSB's code. viewBox="0 0 1000 1500" the 1000 is the width of the image and 1500 is the height of the image. You also have the edit <image height="1500" width="1000" with the image's dimensions. And finally, you have to put where the image is twice in href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/>. Last edited by JSWolf; Yesterday at 06:50 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Moon+ Reader - images cut off	Kittyk4y	Android Devices	2	08-22-2025 10:54 PM
Images cut off, easy solution?	fogice	Editor	3	12-29-2023 08:20 PM
Libra Text with side-loaded font cut off at the bottom in vertical layout (synched KePub)	kch	Kobo Reader	0	01-17-2021 09:30 PM
Since 1.9.10, text slightly cut off on very bottom line	danskmacabre	Kobo Reader	33	01-13-2012 06:25 AM
Touch Bottom line of page cut in half since 1.9.10?	NineOne	Kobo Reader	7	09-20-2011 06:01 PM

10-30-2026, 10:09 AM	#4
Siavahda Addict Posts: 297 Karma: 9400 Join Date: Aug 2010 Location: Helsinki Device: Kobo Clara Colour	To be clear, your solution absolutely worked. But I'd like to know why the original code didn't, if anyone can explain that.

Yesterday, 05:42 PM	#13
DNSB Bibliophagist Posts: 55,597 Karma: 182544312 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	BTW, the reason for using the href="../Images/cover.jpeg" xlink:href="../Images/cover.jpeg"/>" structure is to stop epubcheck/epubveri from emitting a usage error that xlink is not needed for epub3. It will not affect the display of the image in any renderer up to and including one that claims ePub 3.4 compatibility. Jon, you did notice that my code posted in message #6 in this thread had the dual image links?