注意：除非使用HTML 4.01，否则直接以<img>width或height属性提供百分比是无效的（详见current spec，obsolete spec和this answer)）。也就是说，浏览器通常会容忍这种行为，以支持向后兼容。

第二个示例中的百分比宽度实际上应用于<img>所在的容器，而不是图像的实际大小。假设您有以下标记：

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

您的结果图像将是500 px宽和300 px高。

jQuery Resize

如果你想把一张图片缩小到它宽度的50%，你可以用一段jQuery代码来实现：

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

只要确保你先去掉任何height/width = 50%的属性。

你可以设置一个或另一个（只是不是两个），这应该会得到你想要的结果。

<img src="#" height="50%">

以下是不同之处：
这会将图像设置为原始大小的一半。

<img src="#" width="173" height="206.5">

这会将图像设置为其可用演示区域的一半。

<img src="#" width="50%" height="50%">

例如，如果您将this作为页面上的唯一元素，它将尝试占用页面宽度的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%”and height=“50%”将width和height属性设置为父元素width和height的一半，如果我没有弄错的话。如果你使用的是percents，那么只设置width或height应该将width或height设置为父元素的百分比。

由于缺乏关于原始图像大小的信息，指定宽度和高度的百分比将导致非常不稳定的结果。如果您试图确保图像适合页面上的特定位置，则需要使用一些服务器端代码来管理重新缩放。

从W3Schools

• 包含元素的高度百分比（如“20%”）。*

所以我认为它们是指div所在的元素？

不知道这是不是你要找的，但为什么不直接使用内联CSS呢？
示例：

<img src="" alt="text alternative" style="width: 100%; height: 20%;" />

实际上有一种方法可以只使用html来做到这一点。只需设置：
<img src="#" width height="50%">