Dynamic Image Sizing (Zoom) for Firefox
The following javascript code will setup a HTML document so that in Firefox when the fontsize is increased or decreased, the images will increase or decrease in size as well. The code can be appended to the end of any HTML document you wish or possibly made into a Firefox extension.
Usage
After appending the following code to any HTML document use theCtrl+Mouse Wheel, the View -> Text Size, Ctrl++, Ctrl+-, or Ctrl+0 menus and or accelerators in Firefox to zoom the page in or out. Internet Explorer and Opera already have the ability to zoom text and images and as far as I know are unaffected by the code.
Limitations
The code does not resize images that are displayed as part of the CSS style.Javascript Code
<!-- dynamic image sizing - set image size according to font size {{{
Copyright (C) 2007 John Elkins
LISCENSE
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the
Free Software Foundation; either version 2 of the License, or (at your
option) any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
Public License for more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
REQUIREMENTS
Firefox web browser. IE and Opera already have an image zoom
functionality.
USAGE
Place the following code at the END of the document. After all
images have finished loading.
LIMITATIONS
Images defined by CSS styles are not resized
Version 1
4 June 2007
-->
<style type="text/css">
<!--
.em_test_hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
overflow:hidden;
}
-->
</style>
<script type="text/javascript">
<!--
// Create the test image
var element = document.createElement('img');
element.setAttribute("src", "");
element.setAttribute("style","height:1em;");
element.setAttribute("class","em_test_hidden");
element.setAttribute("id","em_test_element");
document.body.appendChild(element);
element.class="em_test_hidden";
// Use the test image to determine the pixels per em
var px_per_em = document.getElementById("em_test_element").height;
// Set all image heights to change relative to the em
var image = document.getElementsByTagName("img");
for (var i=0; i<image.length; i++) {
var dynamic_em_height=image[i].height/px_per_em;
var dynamic_em_width=image[i].width/px_per_em;
image[i].style.height = dynamic_em_height+"em";
image[i].style.width = dynamic_em_width+"em";
}
// change the document so it also resizes accordingly
document.body.style.width = document.width/px_per_em+"em";
-->
</script> <!--}}}-->
