John's Computer Journal

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 the Ctrl+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> <!--}}}-->