I'm placing an image on a promo page like this:
the CSS:
The intention is to have the image-- 800 wide x 438 high -- in the middle, scaled to 60% of page width.
And that's what I see in Sigil, and Calibre in the ePub.
When I export to AZW3 and load on a PW3, what I see is an image that is about 8 cm wide on the 9cm wide screen, with a left margin of 2cm, cut off on the right side -- i.e. image is 90% of page width, off-centre.
It seems that the left margin is about 20% of the page width, but the image is not being scaled to 60%.
How can I fix this?
Code:
<div class="center">
<img alt="ad-subs" src="../Images/ad-subs.jpg" class="img60"/>
</div>Code:
.center {
text-align: center;
text-indent: 0;
}
.img60 {
width: 60%;
margin-left: 20%;
margin-right: 20%;
}And that's what I see in Sigil, and Calibre in the ePub.
When I export to AZW3 and load on a PW3, what I see is an image that is about 8 cm wide on the 9cm wide screen, with a left margin of 2cm, cut off on the right side -- i.e. image is 90% of page width, off-centre.
It seems that the left margin is about 20% of the page width, but the image is not being scaled to 60%.
How can I fix this?