View Single Post
Old 03-04-2013, 03:48 PM   #14
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
Posts: 9
Karma: 10
Join Date: May 2012
Location: Melbourne
Device: none
Am getting there!

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
trevorburdon is offline   Reply With Quote