View Single Post
Old 05-02-2025, 06:30 AM   #15
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,369
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Using ePub3 - if your targeted reader supports the css3 properties - you can use:
'object-fit: contain' as you mentioned, and maybe take a look at 'display: flex' .

You would need to provide fallback coding for devices that don't support them.

As DNSB mentioned, I use an svg wrapper that seems to be widely supported and works on ePub2/3 and doesn't care if the reading device is portrait or landscape, or if the image is wider than tall. But that really only works when you have an image taking up an entire page by itself. There are techniques to add text to the svg wrapper, but that is more in-depth. For your purposes I would stick with using the object-fit and display: flex for the ePub3 and fallback to the coding RbnJrg recommended.

Example SVG wrapper:
Code:
<html>
 <head>
    <title></title>     
    <style type="text/css">
        *   {margin:0; padding:0}
        div {width:100%; width:100vw; height:100%; height:100vh}
    </style>
</head>
<body>

<div>
  <svg 
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="573px" height="800px" 
    viewBox="0 0 573 800" 
    preserveAspectRatio="xMidYMid meet">
     <image width="573" height="800" xlink:href="../Images/your_img.png" />
  </svg>
</div>

</body> 
</html>

Last edited by Turtle91; 05-02-2025 at 06:48 AM.
Turtle91 is offline   Reply With Quote