MobileRead Forums - View Single Post - Centred and scaled image not centred or scaled

AlanHK · 11-15-2017, 08:54 PM

I'm placing an image on a promo page like this:

Code:

<div class="center">
    <img alt="ad-subs" src="../Images/ad-subs.jpg" class="img60"/>
</div>

the CSS:

Code:

.center {
    text-align: center;
    text-indent: 0;
}

.img60 {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}

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?

11-15-2017, 08:54 PM	#1
AlanHK Guru Posts: 668 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	Centred and scaled image not centred or scaled I'm placing an image on a promo page like this: Code: <div class="center"> <img alt="ad-subs" src="../Images/ad-subs.jpg" class="img60"/> </div> the CSS: Code: .center { text-align: center; text-indent: 0; } .img60 { width: 60%; margin-left: 20%; margin-right: 20%; } 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? Last edited by AlanHK; 11-15-2017 at 08:59 PM.