Epub cover image

by zircon

HTML

<!--Experimental-->
<body id="Setup">
<div id="container" epub:type="cover">
  <img src="https://i.postimg.cc/rsyGT8vQ/i1246.jpg" />
</div>
</body>
<!--STILL TESTING-->
<!-- 
====== Epub cover image ======
====== 12-28-2023 update ======
Code explanation: instead of CSS 'width' being declared, this code declares the image 'height', thus it visually renders the same whether you view it on a web browser, or in an Epub3x. 
If you use software to open/edit an epub, this code may be less benefitial in your project[***] since it uses a few extra lines of code. The purpose of this CSS method is for prep processes that use certain key software such as web browser developer tools, VisualStudio, etc.

- EPUB 3.x format.
- Responsive like an SVG but use JPG/PNG image.
- OS environ tested: Android and Windows.
- eReaders: ADE, Aldiko, Pocketbook, ReadEra, Thorium, Moon+, and Sigil (Bibi and Readium viewers).

Next point:
- Linux, and iOS: not tested - not goal.

Next point:
- Epub 2.x format: not tested - not goal (though someone might use @supports to make it work).

Next point:
- Kindle KDP: the Kindle Previewer tool shows this CSS working properly (i.e. max-height is ignored). Further tests may be required if you intend to use it in KDP live epub because their 'Previewer' tool may, or may not, represent exactly what their Kindle device will see.

***There are shorter code string examples of SVG and/or DIV code methods listed elsewhere on the web. This unique code style has 20-25 lines, depending on whether you need all the lines of code for your project. 

======TEST DETAILS======
Test conducted for Android and Windows based readers only.
Windows:
- Firefox web browser - cover centered on page.
- JSFiddle - cover centered on page.
- ADE: cover on left dual page panel.
- Thorium: cover on left dual page panel. 
- Sigil: cover is center.
- Sigil's Readium viewer: cover left panel in dual pane mode; center in single pane.
- Sigil's Bibi viewer: cover left panel in dual pane...

CSS

html {}
body#Setup {
  height: 100%; /* fallback */
  height: 100vh; /* for epub3 */
  margin: 0;
  text-align: center;
}
#container {
  height: 100%;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
#container img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* not key if absolute used below */
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  column-span: none;
  column-fill: auto;
  overflow: auto;
}

/* test */
body *:last-child {
  margin-bottom: 0;
}