Large images cut off at bottom of screen

[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

<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

.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]

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

HTML

<?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

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]

Originally Posted by JSWolf

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

HTML

<?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

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]

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]

Here is what works from your code.

HTML

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

CSS

.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]

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

.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.

1. Remember that CSS is short for cascading style sheet
2. Items further down the stylesheet will override earlier items unless you mark tham as !important.
3. 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.

<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>

.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.