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? Thanks
<html>
<head>
<title></title>
</head>
<body>
<div>
<img src="image4.png" width="50%" height="50%"/>
</div>
</body>
</html>
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});
console.log(imgWidth);
}
console.log(imgLength);
});
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.