Example page for custom CSS class fittoscreen.
Used on the help article CSS classes.
- The graphic Earth Moon distance has originally a width of 14,530 px.
- If you resize it to lets say 600px, it will be still quite small, and be 600px wide no matter how wide the visitor's browser window is:
[[File:Earth Moon distance.png|600px]]
- You could also resize it to for example 2000px and put it in a div with the styles
width:100%; height:auto; overflow: auto;. This would produce a scroll bar unless the browser window is over 2000px wide, which is also not optimal.
<div style="overflow: auto; width:100%; height:auto;">[[File:Earth Moon distance.png|2000px]]</div>
- The class
fittoscreenmakes it adapt to the size of the browser window. - (change your browser's window size to see it)
<div class="fittoscreen">[[File:Earth Moon distance.png]]</div>