Image re-size to 50% of original size in HTML
JqueryHtmlImageJquery Problem Overview
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);
});
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
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">
- subjected to browser compatibility
Solution 3 - Jquery
The percentage setting does not take into account the original image size. From w3schools :
> In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
Also, good practice advice from the same source :
> Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
Solution 4 - Jquery
You can use the x descriptor of the srcset attribute as such:
<!-- Original image -->
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png" />
<!-- With a 80% size reduction (1/0.8=1.25) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 1.25x" />
<!-- With a 50% size reduction (1/0.5=2) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 2x" />
Currently supported by all browsers except IE. (caniuse)