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?