Forum: Author Hangout

It doesn't. Page size is device / device settings dependent. There is no fixed page size

Well, aside from the fact that I meant "image dimensions" and not "page dimensions", then how to websites/epubs handle images which are too large for the page? Do they display the full 300dpi image, even on tiny devices, or does the device somehow know how big to make it, and if so, how?

In the end, I suspect I'll need to research this, as I suspect I'll have to do several 'width specific' conditionals where I quiz the device for the page width and then specify what percentage of the page to make it (i.e. 90% of a small phone but only 50 or 60% of a full monitor).

There is no such thing as a 300dpi image. The image is simply x pixels by y pixels. It knows nothing about display resolutions or inches.

Only, my PC based Amazon display (which Amazon uses to preview how the book appears on any given device) doesn't show the images as full page displays, but instead seems to know precisely how big to make them. (Or maybe not, I'll have to go back and check it again. They may simply default to a set percentage for all images.) However, for most images displayed on a phone/tablet, there are the number of pixels, and the physical dimensions of the image (inches or centimeters), or at least that's how Photoshop stores the information, and how I thought they were passing the information along to each device.

However, you're right. When I view an image on a phone/tablet, it fits it onto a page, unless the image is too small, at which point it'll only display it at its maximum pixel count (the point, beyond which it pixelates).

If I'm not misinformed, you can query the device to determine the dimensions of the display (though I've never tried it myself), so it should be possible to adjust the size of the image on the fly so it doesn't make it either too large or too small.

Width:100% makes it fit fully on any screen regardless of the screen size. However, max-width:1024px limits it to maximum of 1024px, so if the window is 900 pixel wide, the image will be displayed at 900 pixels. If the window is 1540 pixels wide, then the image will be limited to 1024 px and it will be displayed at 2/3 the width of the window.
The 'height:auto' makes sure that whatever the width is, the height is set to keep the image in proper aspect ratio.

Technically, from what I've observed, if you only set one (either width or height), the overall image retains proportionality (i.e. the ratio between them doesn't change so the image isn't distorted).

However, your code provides an ideal solution.

Also keep in mind the css is usually a separate file and not one you may have access to on a given site. So while the html document may refer to the file, without direct access to it yourself, you'll never know what code is included. On top of that any code you write into the files you submit may be stripped out before the reference to the site css is added, thus enforcing the use of only the code the site provides.

We were essentially discussing CSS as it relates to ePubs, rather than on a site like SOL which has it's own site-wide restrictions, though for me, I can also implement the same CSS instructions on my own website.