View Single Post
Old 05-24-2018, 07:02 AM   #6
DoctorOhh
US Navy, Retired
DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.DoctorOhh ought to be getting tired of karma fortunes by now.
 
DoctorOhh's Avatar
 
Posts: 9,897
Karma: 13806776
Join Date: Feb 2009
Location: North Carolina
Device: Icarus Illumina XL HD, Kindle PaperWhite SE 11th Gen
Quote:
Originally Posted by roger64 View Post
The end result is that it displays very exactly on this kind of display without any vertical margin. Obviously, due to the shape of the image, a whitespace is automatically left out on both sides (this is the result of the "auto" job). In this particular case, a 6% whitespace will appear on each side. Again, it's the consequence of the undistorted image shape, and is not related to the margins of the document.
Thanks for the explanation. In that case this might be the better example for you. It preserves the aspect ratio.

Code:
  <div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1252 2024" preserveAspectRatio="xMidYMid meet">
      <image width="1252" height="2024" xlink:href="cover1.jpeg"/>
    </svg>

  </div>
Full Titlepage code

Spoiler:
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta name="calibre:cover" content="true"/>
  <title>Cover</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>
</head>

<body>

  <div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1252 2024" preserveAspectRatio="xMidYMid meet">
      <image width="1252" height="2024" xlink:href="cover1.jpeg"/>
    </svg>

  </div>

</body>

</html>

Last edited by DoctorOhh; 05-24-2018 at 07:10 PM.
DoctorOhh is offline   Reply With Quote