Quote:
Originally Posted by roger64
That's why I do not use any other value than the width in percentage, even for fullscreen*. But I have to calculate it and insert it. I wish this could be automated.
|
I'm still not sure what you are trying to achieve here by calculating a percentage.
The perfect image size as a percentage of your screen dimensions (assuming your screen is 4:3) without having it stretched past it's original size and keeping the original aspect ratio???
If that is correct then you simply need to set your percentage at 100% (or 95%, or 90%...to provide whatever borders you want around the image) and use the max-width property set to that image's width in pixels.
Code:
#fig-2 {width:100%; max-width:626px; text-align:center;
margin:1em auto; text-indent:0; padding:0}
That sets the image to use the full screen width but limit's the maximum width to the actual image dimensions. As you said, do not set the height (even height:auto) and it will automatically be set to the correct height to preserve the aspect ratio.
On a large screen you cannot get a more perfect display of your image.
On a small screen the image will still be scaled down to fit the screen size but will keep the proper aspect ratio.
There is one caveat... If your image is higher than it is wide then you need to add a limit in your css.
img {max-height:100%}
You can see the scaling aspects of this in Sigil by changing the preview window dimensions. Slide the width back and forth and you will see the image scale while maintaining the perfect aspect ratio. You can even compare the two techniques by putting one on top of the other on the same page (on a large screen):
Code:
#fig-2 {width:100%; max-width:626px; text-align:center;
margin:1em auto; text-indent:0; padding:0}
<body>
<div id="fig-2">
<img alt="" src="../Images/Image-02.jpg" />
</div>
<div style="text-align:center">
<img alt="002" id="fig-2" src="../Images/Image-02.jpg" style="width: 88.6%;"/>
</div>
</body>