[Siavahda]

Originally Posted by DNSB

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.

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!