Menu
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); }); 
553
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Resize images with the CSS width and height properties Another way of resizing images is using the CSS width and height properties. Set the width property to a percentage value and the height to "auto". The image is going to be responsive (it will scale up and down).
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.
188
We can do this by css3 too. Try this:
.halfsize { -moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform:scale(0.5); } <img class="halfsize" src="image4.jpg"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
