edit: Dang it! Ninja'd again!!
Quote:
Originally Posted by Quoth
Portrait, set height as a percent and landscape set width.
Only set one or the other.
|
Not quite... That doesn't take into account if the user physically rotates their device to a different aspect, and you still have the problem of determining the correct height.
Quote:
|
To set a percentage height, its parent element must have an explicit height. [or be able to determine an explicit height]
|
As phillip mentioned... How do you determine the height of a parent element, or the containing object?? That is one of the 'bugs' in the ebook realm. If you set a specific height of a <div>, such as 15em, then put the <img> inside that div, you can specify the height of the image as 100% and it will completely fill the height of the <div>...15em. But that process only transfers the problem of determining the correct height for the image to determining the correct height for the div...
Width is a different animal...eBooks must be able to determine the width of the device so that they can reflow the text...so alot of thought has been given to that process and making sure ereaders do it properly. Screen height - not so much.
As just one example of why height isn't a reliable metric ask yourself this question: what is the height of a page/screen if the user is using scrolling instead of paging?? height=100% of a container that is 50 'pages' long could conceivably cover all 50 pages - the entire chapter...and that is only if you have set it as a background image so the text can flow over the top of the image. If you don't, then the image would be 100% long...but then you add the text which makes the chapter longer... but then the image must be bigger to fill the page...but then you have to add...does not compute....does not compute... illogical...illogical
There are attempts to fix this by using vh and vw (viewport height/width)... but they are not consistently implemented across devices and have their own issues.