FLEXIBLE MEDIA

image max-with

by Leo Lanese

HTML

<img id="img" src="http://www.freeimageslive.com/galleries/transtech/informationtechnology/pics/power_button.jpg" alt />    



<!--

Performance matters:

The problem here is the waste of broadband and downloading time.

-->

CSS

img,
video,
object {  
    width: 50%; /* remove me to test! */  
    height: auto; /* works IE7 and IE9 not on IE8 */
} 

/* IE8 hack */
@media \0screen {
  img { 
      width: auto; /* for ie 8 */
  }
}

JavaScript

var myimage = document.getElementById("img"); 

var w = myimage.width;  // visual image width
var h = myimage.height; // visual image height

var rw = myimage.naturalWidth;  // real image width  
var rh = myimage.naturalHeight; // real image height  

alert("visual width: " +  w + "px: - real width: " + rw + "px" + "\n" + "visual height: " + h + "px: - real height: " + rh + "px" );