MobileRead Forums - View Single Post - Possible bug/weird behaviour in ACCESS. Strange scaling on covers

davidfor · 11-25-2013, 06:58 PM

Looking at those, none of them look like they would automatically resize the image to fit into the screen. And, trying some in Sigil demonstrated that to be the case. The Sigil preview window didn't resize the image to fit the fit the window. While that isn't a perfect test, it does suggest that the ACCESS renderer is working as designed.

The usual suggestion for coding the cover is something like the following.

Code:

<div>
  <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 476 714" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="714" width="476" xlink:href="../Images/cover.jpeg"></image>
  </svg>
</div>

The height and width need to be changed to match the image. When that is done, it resizes the image to the screen perfectly.

Oh, and just as a coincidence, I started reading a purchased kepub shortly after your original post. Its cover had the same problem. The code for the cover is:

Code:

<body>
  <div id="book-columns">
    <div id="book-inner">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <span class="koboSpan" id="kobo.1.1"><img alt="" src="../Images/cover.jpg" /></span>
      </div>
    </div>
  </div>
</body>

Again, nothing tell it to resize here or in the CSS.

11-25-2013, 06:58 PM	#4
davidfor Grand Sorcerer Posts: 24,905 Karma: 47303824 Join Date: Jul 2011 Location: Sydney, Australia Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos	Looking at those, none of them look like they would automatically resize the image to fit into the screen. And, trying some in Sigil demonstrated that to be the case. The Sigil preview window didn't resize the image to fit the fit the window. While that isn't a perfect test, it does suggest that the ACCESS renderer is working as designed. The usual suggestion for coding the cover is something like the following. Code: <div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 476 714" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="714" width="476" xlink:href="../Images/cover.jpeg"></image> </svg> </div> The height and width need to be changed to match the image. When that is done, it resizes the image to the screen perfectly. Oh, and just as a coincidence, I started reading a purchased kepub shortly after your original post. Its cover had the same problem. The code for the cover is: Code: <body> <div id="book-columns"> <div id="book-inner"> <div xmlns="http://www.w3.org/1999/xhtml"> <span class="koboSpan" id="kobo.1.1"><img alt="" src="../Images/cover.jpg" /></span> </div> </div> </div> </body> Again, nothing tell it to resize here or in the CSS.