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:
When you set the height attribute on an HTML image tag to a percent, the displayed height is incorrect. QT calculates the height as a percent of the IMAGE height, instead of a percent of the CONTAINER height. It performs proper scale calculations for the width and displays the width properly based on what the height SHOULD be. This means you get a distorted image.
eg.
image dimensions: 600x800 pixels (WxH)
html tag: <div><img height="100%" src="image.jpg" alt="" /></div>
results in an image displayed at 800 pixels in height regardless of the size of the container/window and a width properly scaled for the size what the height SHOULD be.
If the parent container is 400x600 pixels then the image displays 450x800
If the parent container is 200x1600 pixels then the image displays 1200x800
If the parent container is 800x400 pixels then the image displays 300x800
|
...but before I submitted it, I saw something on
w3Schools: with HTML5 you
CAN'T use a percentage when giving the height attribute a value...it
MUST be in pixels.
Quote:
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
|
So, I removed the height attribute from my img tag and all the scaling worked properly....
Quote:
h1[title=Cover] {margin:0 auto; text-align:center}
.image {max-height:100%; max-width:100%}
<h1 title="Cover"><img class="image" alt="cover" src="../Images/cover.jpg" /></h1>
|
...Except...
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?