View Single Post
Old 02-18-2013, 03:50 PM   #1
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,068
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:
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?

Last edited by Turtle91; 02-18-2013 at 07:34 PM.
Turtle91 is offline   Reply With Quote