我想知道在宽度和高度<img> 属性中是否可以将宽度和高度指定为百分比？
嗯，我想这很明显，因为当我尝试这样做时，它会调整大小，但它似乎会扭曲我的图像质量。
这是我的带有固定属性的标记示例：
<img src="#" width="346" height="413">
现在，在尝试通过百分比将其缩小一半时：
<img src="#" width="50%" height="50%">
我得到了完全不同的东西：
<img src="#" width="173" height="206.5">
我认为我只是从根本上误解了我的百分比标记或其他东西，因为我的第二个和第三个示例在视觉上存在明显差异。
【问题讨论】：
标签： html image image-size
注意：除非您使用 HTML 4.01，否则直接提供百分比为 <img> width 或 height 属性是无效的（请参阅 current spec、obsolete spec 和 @987654323 @ 更多细节）。话虽如此，浏览器通常会容忍这种行为以支持向后兼容性。
第二个示例中的这些百分比宽度实际上应用于您的 <img> 所在的容器，而不是图像的实际大小。假设您有以下标记：
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
生成的图像将是 500 像素宽和 300 像素高。
jQuery 调整大小
如果您想将图像缩小到其宽度的 50%，您可以使用 jQuery 的 sn-p 来实现：
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
只要确保你首先去掉任何高度/宽度 = 50% 的属性。
【讨论】：
var $img = $( "#imgId" ); $img.width( $img.width() * .5 );
您可以设置一个或另一个（但不能同时设置），这应该会得到您想要的结果。
<img src="#" height="50%">
【讨论】：
这里有区别：
这会将图像设置为其原始大小的一半。
<img src="#" width="173" height="206.5">
这会将图像设置为其可用演示区域的一半。
<img src="#" width="50%" height="50%">
例如，如果您将此作为页面上唯一的元素，它将尝试占据页面宽度的 50%，从而使其可能大于其原始大小 - 而不是其原始大小的一半你期待。
如果以大于原始尺寸的方式呈现，图像会出现很大的像素化。
【讨论】：
尝试在 css3 中使用 scale 属性：
原件的 75%：
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
原件的 50%：
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
【讨论】：
width="50%" 和 height="50%" 如果我没记错的话，将宽度和高度属性设置为父元素宽度和高度的一半。如果您使用百分比，那么仅设置宽度或高度应将宽度或高度设置为父元素的百分比。
【讨论】：
由于缺乏有关原始图像大小的信息，指定宽度和高度的百分比会导致结果非常不稳定。如果您试图确保图像适合页面上的特定位置，那么您需要使用一些服务器端代码来管理重新缩放。
【讨论】：
【讨论】：
实际上有一种方法可以仅使用 html 来执行此操作。只是设置：
<img src="#" width height="50%">
【讨论】：