Centred and scaled image not centred or scaled

[AlanHK]

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

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

the CSS:

.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?

[AlanHK]

Well, found a solution, if not an explanation:

scaling in the outer div instead of the image tag made it work.

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

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

Both are identical in epub, but only this is as intended in AZW3.

[Notjohn]

But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?

[AlanHK]

Originally Posted by Notjohn

But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?

Not even looking at mobi7, I just make AZW.

This book requires KF8 for fonts and other features, how KF7 looks I don't really care.

[Hitch]

Originally Posted by Notjohn

But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?

To answer your question, NJ: yes. It will be 100%. You can't work around KF7's issues with images with a media query alone. To do it correctly, you put the image in twice (call it twice, I mean); once in a KF8 div, once in a KF7. In the KF7, you assign the fixed-size of the image, so that it's not overdriven; in the KF8, you call it with a %.

You hide each from the other--which is where the MQ's do come in to play. William's plugin does that work for you, if you use it.

Hitch

[Notjohn]

Originally Posted by AlanHK

how KF7 looks I don't really care.

That's my feeling as well. While I'm not a fan of Apple's obsolescence-by-design, there is a point where we should stop using shields and bucklers (whatever a buckler may be) and adopt Kevlar body armor.

[Hitch]

Originally Posted by Notjohn

That's my feeling as well. While I'm not a fan of Apple's obsolescence-by-design, there is a point where we should stop using shields and bucklers (whatever a buckler may be) and adopt Kevlar body armor.

That's a luxury that I don't have.

Hitch

[Bozana]

I'm sorta having similar problems but I've gone down the rabbit hole with svg image:

In my stylesheet:

.svg {
display: block;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 15%;
}

In my html:

<p class="svg"><img alt="scrolls" src="scrolls.svg"/></p>

and another, I tried using the viewbox method:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots), however, it's fine in Sigil and Calibre. I want to keep the size of scrolls.sgv, as I'm happy with the size, however, I would like scroll.svg to be smaller. I'm editing this in Sigil.

Very bizarre! Any help with this, would be much appreciated.

[Hitch]

Originally Posted by Bozana

I'm sorta having similar problems but I've gone down the rabbit hole with svg image:

In my stylesheet:

.svg {
display: block;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 15%;
}

In my html:

<p class="svg"><img alt="scrolls" src="scrolls.svg"/></p>

and another, I tried using the viewbox method:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots), however, it's fine in Sigil and Calibre. I want to keep the size of scrolls.sgv, as I'm happy with the size, however, I would like scroll.svg to be smaller. I'm editing this in Sigil.

Very bizarre! Any help with this, would be much appreciated.

The above-mentioned screenshots/pictures would help?

Hitch

[RbnJrg]

as I have two svg images, scroll and scrolls. Both failed, when I open it in a epub application, such as Sony Reader for PC (see 2 attached pictures/screenshots)

Where are the two attached screenshots? By the way, this is bad implemented:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

You can't define the "viewbox" and "preserveaspectratio" properties inside a <p> tag.

[Hitch]

Originally Posted by RbnJrg

Where are the two attached screenshots? By the way, this is bad implemented:

<p class="svg" width="100%" height="100%" viewbox="0 0 45 30" preserveaspectratio="xMinYMin meet"><img width="45" height="30" alt="scroll" src="scroll.svg"/></p>

You can't define the "viewbox" and "preserveaspectratio" properties inside a <p> tag.

Which might go a fur piece in 'splainin' why that code ain't workin'!



Hitch

[hobnail]

Originally Posted by Hitch

Which might go a fur piece in 'splainin' why that code ain't workin'!



Hitch

Someone's been reading Westerns; oh wait, you live there!

[Hitch]

Originally Posted by hobnail

Someone's been reading Westerns; oh wait, you live there!

I duz!

Hitch