Quote:
Originally Posted by KevinH
I do not understand the calculation yet. Is your original image 626 pixels wide and and 942 pixels tall or visa-versa?
If 626 wide and 942 tall and your screen has a 4/3 aspect ratio (say 800 pixels wide by 600 pixels tall) then allowing your image width to be 88.6% of the screen would result in an image width of 708.8 pixels. To keep the same aspect ratio, you would have to scale your image height to 1066 pixels which would go over one screen in height.
If instead your image is 942 pixels wide and 626 pixels tall and your screen has a 4/3 aspect ratio (again use a width of 800 and height of 600 for the screen), then setting the width to use to be 88.6% of the screen would result in an image width of 708.8 pixels which then would result in an image height of 471 pixels on the screen (to keep the same aspect ratio) which would fit nicely into a single screen.
That is why I asked if you were using image width over image height or visa-versa?
Which is it?
|
Ah, sorry for having been so unclear. If the image is wider than high (see the "caveat" of Turtle91 above), I do not need to calculate anything and will use :
Quote:
|
style="width: 100%;" or some lesser arbitrary value
|
I only need to calculate when the image is higher than wide. So here, for an image that I wish to display fullscreen without any margin (see first post), if its dimensions are 626 px wide and 932 px high, I will use .
To get this value:
626/932 = 0,6716
0,6716 × 4 / 3 = 0,8954 that is 89.5%
Thus, the image on my screen will fit exactly 100% of its height, leave a little more than 5% margin on either side and will not be distorted nor cropped nor allow any vertical white space. I think it is the best we can hope for on a small screen.