Insert image to DOM resized to 50% of its width/height

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 imag开发者_StackOverflow社区e has width and height both at 50%.

First of all, if you're setting a width and height, you should also include display: block; since inline elements don't generally enjoy being given a set height.

But more importantly, when you express a width (or height) as a percentage, that's a percentage of the parent element, so if the parent is 1000px wide, the image will be 500px wide (regardless of what size the actual image file is).

If you're using JavaScript to determine the current image size and change it, just express the new size in px instead of %.

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.

Does the parent container have a height/width? it maybe that the browser does not know what 50% of x is and what 50% of y is. but if it knew what x and y were then it could apply it. Try

var myWidth = $('.sImg').width(),
myHeight = $('.sImg').height();

myWidth = myWidth / 2;
myHeight = myHeight / 2;

$('.sImg').attr('width', myWidth + 'px').attr('height', myHeight + 'px');

http://api.jquery.com/width/

http://api.jquery.com/height/