Sam*_*Sam 49 html jquery image
我正在尝试用HTML重新调整图像大小,它的宽度为314px,高度为212px.我想将其重新调整为50%......
但使用这个我仍然得到一个更大的图像而不是一个半尺寸的图像.
<img src="image.jpg" width="50%" height="50%" />
我做错了什么？谢谢
<html>
<head>
<title></title>
</head>
<body>
<div>
<img src="image4.png" width="50%" height="50%"/>
</div>
</body>
</html>
我使用下面的jquery解决了上面的问题:
$(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);
});
Asi*_*sif 71
你在这里没有做错任何事,它会覆盖图像大小的任何其他东西.
你可以检查这个工作小提琴.
在这个小提琴中,我使用改变了图像大小%,并且它正在工作.
也尝试使用此代码:
<img src="image.jpg" style="width: 50%; height: 50%"/>?
这是小提琴的例子.
您可以这样使用属性x的描述符：srcset
<!-- 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" />目前除IE之外的所有浏览器都支持。（我可以用吗）
我们也可以通过css3来做到这一点.试试这个:
.halfsize {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
<img class="halfsize" src="image4.jpg">