Mobileread
Centred and scaled image not centred or scaled
#1  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?
Reply 

#2  AlanHK 11-15-2017, 09:40 PM
Well, found a solution, if not an explanation:

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

Code
<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.
Reply 

#3  Notjohn 11-20-2017, 06:52 AM
But it's 100% on the "Mobi 7" devices, right? Do you use a media call to handle those?
Reply 

#4  AlanHK 11-20-2017, 08:54 AM
Quote 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.
Reply 

#5  Hitch 11-23-2017, 01:01 PM
Quote 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
Reply 

#6  Notjohn 11-24-2017, 06:10 AM
Quote 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.
Reply 

#7  Hitch 11-24-2017, 09:28 AM
Quote 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
Reply 

#8  Bozana 08-04-2020, 01:42 AM
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.
Reply 

#9  Hitch 08-04-2020, 08:39 AM
Quote 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
Reply 

#10  RbnJrg 08-05-2020, 08:46 AM
Quote
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:

Code
<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.
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register