Display image at 50% of its “native” size

Question

I\'m putting an img tag in a document without knowing the width/height of the corresponding image:

Answer 1

It's somewhat weird, but it seems that Webkit, at least in newest stable version of Chrome, supports Microsoft's zoom property. The good news is that its behaviour is closer to what you want.

Unfortunately DOM clientWidth and similar properties still return the original values as if the image was not resized.

// hack: wait a moment for img to load
setTimeout(function() {
   var img = document.getElementsByTagName("img")[0];
   document.getElementById("c").innerHTML = "clientWidth, clientHeight = " + img.clientWidth + ", " +
      img.clientHeight;
}, 1000);

img {
  zoom: 50%;
}
/* -- not important below -- */
#t {
  width: 400px;
  height: 300px;
  background-color: #F88;
}
#s {
  width: 200px;
  height: 150px;
  background-color: #8F8;
}

div with explicit size for comparison 200px by 150px
div with explicit size for comparison 400px by 300px