02-18-2013, 03:50 PM | #1 | |||
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
QT5 and image height
The problem of images not scaling correctly was mentioned somewhere before, but determined to be a QT5 bug. I've been messing with it and I don't think it's a bug - I think it is QT5 supporting HTML5.
I wrote this up as a bug report over on the QT wiki... Quote:
Quote:
Quote:
Now I can't get a properly scaled image to fill the entire screen (height="100%") unless the source image is larger than the container/screen. If I enter an over-sized height in pixels (height="4000px") and rely on the max-height:100% to limit the height (which it does) I end up with an image that is the correct height but stretched to the width of the container/screen - not properly scaled. Google gives me advice to use the CANVAS tag, but I didn't think Sigil supported all of that yet. Anyone have an idea on how to fix this? Last edited by Turtle91; 02-18-2013 at 07:34 PM. |
|||
02-18-2013, 04:19 PM | #2 | |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I hate it when you go searching forever on a problem....then you ask a question...and 2 minutes later you get an idea...
I didn't think this would work because background-size is a CSS3 attribute...but it does...at least in Sigil. I have this as my cover.html file: Quote:
so...there is hopefully a better way of doing it?? Last edited by Turtle91; 02-18-2013 at 04:55 PM. |
|
02-18-2013, 08:44 PM | #3 | |
Sigil & calibre developer
Posts: 2,488
Karma: 1063785
Join Date: Jan 2009
Location: Florida, USA
Device: Nook STR
|
Quote:
|
|
02-20-2013, 02:35 PM | #4 |
A curiosus lector!
Posts: 463
Karma: 2015140
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
|
Turtle91,
Did you try to play with auto settings? I'm getting good results with: Code:
img { height:auto; max-width:100%; } |
02-20-2013, 03:23 PM | #5 | |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
However, AUTO will only go up to 100% of the actual image height. That works great if the image is larger than the container/display - it will scale down appropriately. But it does NOT allow you to enlarge an image that is smaller to fill the screen. I guess one would ask, "Why do you want to enlarge an image - it will just lose resolution and start to look yucky." That's true. But most of the images I have were originally scaled down to about 600 pixels high. I could zoom in on them a little without having them look too bad in the previous version, now I can't...and it appears I won't be able to when HTML5 gets fully implemented. One quirk I found with Sigil is that the image does not automatically re-size when a pane is opened, taking up some of the viewer real estate. eg. I have an image (cover.html) filling the entire height of the BookView pane (with the F/R) pane closed. When I open the F/R pane, the image does not resize. If the F/R pane was open when I fit the image to the BV pane then when I close the F/R pane, the image re -sizes properly. The same thing applies when I am looking at the Preview pane. Re-sizing of the image is correct when I drag the Inspector window down, but not when I drag it up. It will only refresh the preview image when I select a different tab, or switch from BV to CV. Cheers! |
|
02-20-2013, 03:50 PM | #6 |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Let's say the image was the cover. That code would not work well at all. In fact, it's the wrong way around. For the cover, you want the height to be 100%. Also, if it's a map, you also want the height to be 100%. In a number of cases, that's backwards.
|
02-20-2013, 03:55 PM | #7 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
That's true...mostly...the code actually works to get it to display properly - if the image is larger than the container....that's the problem we are having...if you use "height=100%" then the display is all whacked - the aspect ratio is all tweaked. Apparently HTML5 no longer supports a % in the height/width attributes, ONLY pixels. So we are trying to figure out how to get it to display properly...an effective height=100% and yet stay scaled properly.
|
02-20-2013, 04:33 PM | #8 |
A curiosus lector!
Posts: 463
Karma: 2015140
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
|
@Turtle91
You have deciphered exactly what I meant and the purpose of my post about new specifications of HTML5. We have to find solutions to replace % and do some experimentations. And my suggestion is pertaining to Sigil. You know some days the english.dll has hard time to load in my brain, so I wrote as short as I can. Have a nice day! |
02-20-2013, 05:13 PM | #9 | |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
02-20-2013, 07:51 PM | #10 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Uggghh.... I was hoping to stay away from SVG...I haven't figured it out yet, and when I learned that HTML5 can use the <canvas> tag, I was hoping I didn't have to. Do you know any SVG tutorial sites off hand?
|
02-20-2013, 08:06 PM | #11 | |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
<div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 482 775" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="775" width="482" xlink:href="../Images/cover.jpeg"></image> </svg> </div> |
|
02-20-2013, 08:34 PM | #12 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Cool! That works!
Thanks! Last edited by Turtle91; 02-20-2013 at 09:58 PM. |
02-20-2013, 09:25 PM | #13 |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
02-20-2013, 09:25 PM | #14 |
A curiosus lector!
Posts: 463
Karma: 2015140
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
|
Turtle91,
Of course for a cover it is better to use: Code:
<image height="800" width="600" xlink:href="../Images/cover.png"></image> |
02-20-2013, 09:30 PM | #15 |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
No it would not. It's best to use the actual image's numbers due to a bug in an older version of ADE (no idea if the newer versions have this bug). If you use numbers that are not the actual image's numbers, you get an incorrect aspect ratio. It will probably look fine in Sigil, but it may not in ADE and it won't if the version matches the version used in the 505.
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Line height insanity! | Kamikuza | Conversion | 6 | 10-24-2012 11:56 PM |
Image height in div | soparch | ePub | 5 | 03-29-2012 01:18 PM |
What image height causes images to fill the screen? | karenbryant | ePub | 7 | 01-04-2012 04:23 AM |
Advice about line-height | Julien Pham | Sigil | 2 | 12-22-2011 09:05 AM |
Max-Height | theducks | Sigil | 6 | 09-02-2010 05:40 PM |