我想知道是否在宽度和高度<img>属性中，我可以将宽度和高度指定为百分比？
好吧，我想这很明显，因为当我尝试这样做时，它会调整大小，但它似乎会扭曲我的图像质量。
这是我的带有固定属性的标记的示例：
<img src="#" width="346" height="413">
现在，在尝试通过百分比将其缩小一半时：
<img src="#" width="50%" height="50%">
我得到的东西完全不同于：
<img src="#" width="173" height="206.5">
我认为我只是从根本上误解了我的百分比标记或其他东西，因为我的第二个和第三个示例在视觉上存在明显差异。
注意：除非您使用 HTML 4.01，否则直接提供百分比作为<img> width或属性是无效的（有关更多详细信息，请参阅当前规范、过时规范和此答案）。话虽如此，浏览器通常会容忍这种行为以支持向后兼容性。height
第二个示例中的这些百分比宽度实际上应用于您所在的容器<img>，而不是图像的实际大小。假设您有以下标记：
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
您生成的图像将是 500 像素宽和 300 像素高。
jQuery 调整大小
如果您想将图像缩小到其宽度的 50%，您可以使用 jQuery 片段来实现：
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
只需确保首先取消任何高度/宽度 = 50% 的属性。
您可以设置一个或另一个（不能同时设置），这应该会得到您想要的结果。
<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%">