Question

So I am trying to insert an image to a page with JavaScript with 50% of its width and 50% of its height.

I do this:

someElement.html('<img src="/path/to/img.jpg" alt="" class="sImg" />');

The sImg class is defined in stylesheet like this:

.sImg{
    border: 0;
    width: 50%;
    height: 50%;
}

Yet the image appears fullsize.

I have also checked via Firebug and the image has width and height both at 50%.

Answer 1

The CSS you’ve got means that the width and height should be computed as half the size of the parent container, not the image itself.

What you can do is something like this: create an Image object and give it an “onload” handler. The handler can get reliable size information (because the image will have been loaded), and can then add the image element with the proper size.

var img = new Image();
img.onload = function() {
  $(someElement).empty().append($('<img/>', {
    src: img.src,
    alt: '',
    'class': 'sImg',
    css: { width: Math.floor(img.width / 2) + 'px', height: Math.floor(img.height / 2) + 'px', display: 'inline-block' } // display should be set as you need it
  });
};
img.src = yourUrl;

edit — the eerily knowledgeable Šime Vidas points out that setting the “width” or “height” attribute should make the right thing happen, with the size being reduced appropriately to maintain the aspect ratio.