feat(ipub): ipub-image element

.epub/example/OEBPS/scripts/ipub.js

@@ -126,10 +126,14 @@ class IPUBContent extends HTMLElement {
   static elementName = "ipub-content";
 }
 
+class IPUBImage extends HTMLElement {
+  static elementName = "ipub-image";
+}
+
 globalThis.addEventListener("load", () => {
   console.info("IPUB: STARTING DEFINITIONS");
 
-  [IPUBBackground, IPUBContent].forEach((e) => {
+  [IPUBBackground, IPUBContent, IPUBImage].forEach((e) => {
     console.info(`IPUB: Defining custom element <${e.elementName}>`);
     globalThis.customElements.define(e.elementName, e);
   });

.epub/example/OEBPS/sections/section0001.xhtml

@@ -14,7 +14,9 @@
         <ipub-background id="background0001" sticky="">
           <img src="../images/background0001.jpg" width="100" height="100" />
         </ipub-background>
+        <ipub-image>
           <img src="../images/image0001.png" />
+        </ipub-image>
         <section data-ipub-element="page" id="page01">
           <span data-ipub-element="image">
             <img src="../images/image0001.png" />

.epub/example/OEBPS/styles/stylesheet.css

@@ -96,7 +96,18 @@ ipub-background {
   }
 }
 
+ipub-image {
   position: relative;
+  display: block;
+  flex-direction: column;
+
+  width: var(--ipub-width, unset);
+  height: var(--ipub-height, unset);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 
 [data-ipub-element="image"] {