I have created an ebook with a lot of figures, and Calibre viewer shows them correctly. A friend of mine however complained that many figures showed really large on his Kobo Aura One, and he sent me some pics (you may see them here).
I had a quick look at the source: the figure is coded as
<div class="wrap">
<p class="figura"><img alt="" src="../Images/q078a.png" width="70%"/></p>
</div>
<div class="BullProblema">
<p><a href="../Text/aiutini.xhtml#a078">vuoi un aiutino?</a></p>
<p><a href="../Text/soluzioni.xhtml#s078">vai alla risposta</a></p>
</div>
</div>
and the CSS is
.figura {
text-align: center;
margin: 1em;
padding: 0;
display: inline-block; }
.wrap {text-align: center; }
.BullProblema, .BullAiutino, .BullSoluzione {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 0px;
text-align: center;
line-height: 1.5em;
border-style: double;
border-width: medium;
border-color: black;
}
It seems to me that the Kobo does not read the CSS: indeed, if I remove the line "display: inline-block;" from the CSS, Calibre reader also shows a large figure.
What did I wrong? My source contains the line
<link href="../Styles/stile.css" rel="stylesheet" type="text/css"/>
and stile.css is my actual stylesheet.
<div>
tag. – rgchris Nov 12 '18 at 21:22