I am finding the discussion very valuable. Thanks.
To recap I want to:
- Place images on low res e-reader 600*800 screens, med res XGA (768*1024) screens and high res retina double XGA screens
- Do it once without specifying different devices
- Preserve image proportions
- Have images scale up
I have the following proportioned images:
- Full page - Eg Cover page, title page
- *Full width - Eg photo pages
- *Partial width - Eg smaller inline
In reality there are many variations in device proportions especially when one considers tablets, phablets and mobiles! Given I want to preserve my image proportions I am left with *2 cases to consider. I do understand that the cover may need some special treatment.
Taking on board as much as I can from our discussion, would the following work? Which would you choose?
A. With img class selectors only
img.fullwidth
width: 100%
max-height: 100%
img.partialwidth
width: x%
max-height: x%
Would this upscale though?
B. With div and img class selectors
div.fullwidth
width: 100%
height: 100%
div.partialwidth
width: x%
height: x%
img
max-width: 100%
height: auto
Does this give me greater control over preserving proportions and upscaling?
I look forward to your comments, and have already determined to make a donation on the collective behalf of Mobileread posters.
Regards Trevor