图像在HTML中重新调整为原始大小的50％
我正在尝试重新调整HTML中的图像大小，宽度为314px，高度为212px。 我想重新resize到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); });
你在这里没有做错任何事情，它会超越图像大小。
你可以检查这个工作小提琴 。
在这个小提琴中，我用%改变了图像的大小，它正在工作。
也请尝试使用此代码：
<img src="image.jpg" style="width: 50%; height: 50%"/>
这里是例子小提琴。
我们也可以通过css3来做到这一点。 尝试这个：
.halfsize { -moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform:scale(0.5); } <img class="halfsize" src="image4.jpg">
- 受到浏览器兼容
百分比设置不考虑原始图像大小。 从w3schools ：
在HTML 4.01中，宽度可以以像素或包含元素的％来定义。 在HTML5中，值必须以像素为单位。
此外，来自同一来源的良好实践build议：
提示：使用高度和宽度属性缩小图像大小会强制用户下载大图像（即使在页面上看起来很小）。 为了避免这种情况，在使用页面之前，先用程序重新调整图像的大小。
