Html – Image re-size to 50% of original size in HTML


I'm trying to re-size a image in HTML, it's got width 314px and height 212px. I want to re-size it to 50%…

but using this I still get a bigger image instead of a half-size image.

<img src="image.jpg" width="50%" height="50%" />

What did I do wrong?

        <img src="image4.png" width="50%" height="50%"/>

I resolved the above problem using jquery below:

$(document).ready(function(e) {
        var imgs = document.getElementsByTagName('img');
        var imgLength = imgs.length;

        for(var i=0; i<= imgLength-1;i++){

            var imgWidth = imgs[i].clientWidth;
            var imgHeight = imgs[i].clientHeight;

            $('img').eq(i).attr({width:imgWidth/2, height: imgHeight/2});




Best Solution

You did not do anything wrong here, it will any other thing that is overriding the image size.

You can check this working fiddle.

And in this fiddle I have alter the image size using %, and it is working.

Also try using this code:

<img src="image.jpg" style="width: 50%; height: 50%"/>​

Here is the example fiddle.