将图像重新缩放为HTML中原始大小的50％

我试图在HTML中重新调整图像大小，它的宽度为314px，高度为212px。我想重新调整大小到50％...将图像重新缩放为HTML中原始大小的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); 

    });

来源

2012-06-20 Sam

你没做什么错在这里，它将任何其他东西所覆盖的图像大小。

您可以检查此工作fiddle。

而在this fiddle我已经改变图像大小使用%，它工作。

也可以尝试使用此代码：

<img src="image.jpg" style="width: 50%; height: 50%"/>

Here is的例子小提琴。

来源

2012-06-20 10:31:25 Asif

我编辑的代码，我写的问题。 – Sam

那么这个代码必须工作..没有什么不对.. – Asif

我提供的答案提供的小提琴链接为你工作？你能在这里看到图像尺寸的差异吗？也可以尝试使用'style'属性，因为我给出了 – Asif

百分比设置不考虑原始图像大小。从w3schools：

在HTML 4.01中，宽度可以用像素或包含元素的百分比来定义。在HTML5中，该值必须以像素为单位。

此外，来自同一来源的良好做法的建议：

提示：裁员与高度大图像和宽度属性强制用户下载大图（即使它看起来很小的页）。为了避免这种情况，请在程序使用页面之前使用程序重新缩放图像。

来源

2013-10-01 16:30:05

关于良好的做法，有理由希望客户端大小调整大小。例如，抗锯齿。 – iPherian

我们也可以通过css3来做到这一点。试试这个：

.halfsize { 
    -moz-transform:scale(0.5); 
    -webkit-transform:scale(0.5); 
    transform:scale(0.5); 
} 

<img class="halfsize" src="image4.jpg">

受到浏览器的兼容性

来源

2015-12-27 08:22:42

这种方法的唯一问题是它在元素周围留下空白。这是因为CSS转换工作的方式是这样的：元素被渲染，变换被应用，其周围的任何其他元素仍然保持原样。 –

将图像重新缩放为HTML中原始大小的50％

回答

相关问题