在HTML中将宽度和高度指定为百分比，而不扭曲照片比例

我想知道宽度和高度

现在，在试图通过百分比将其缩小一半的同时：

<img src="#" width="346" height="413">

我得到的东西完全不同于：

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

---

我想我只是从根本上误解了我的百分比标记或其他东西，因为我的第二个示例和第三个示例在视觉上有明显的差异。

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

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

来自

包含元素的高度（以百分比表示）（如“20%”）

---

因此，我认为它们是指div所在的元素？

width=“50%”和height=“50%”如果我没有弄错的话，将width和height属性设置为父元素宽度和高度的一半。另外，如果使用百分比，仅设置宽度或高度应将宽度或高度设置为父元素的百分比。

注意：除非使用HTML 4.01，否则直接将百分比作为

宽度
或
高度
属性提供是无效的（有关详细信息，请参阅和）。也就是说，浏览器通常会容忍这种行为以支持向后兼容性

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

只需确保首先去掉任何高度/宽度=50%属性。
由于缺少有关原始图像大小的信息，指定宽度和高度的百分比将导致非常不稳定的结果。如果您试图确保图像适合页面上的特定位置，则需要使用一些服务器端代码来管理该重缩放。
以下是区别：

这会将图像设置为其原始大小的一半

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



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

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



例如，如果您将此元素作为页面上的唯一元素，它将尝试占据页面宽度的50%，从而使其可能大于其原始大小，而不是您预期的原始大小的一半

如果以比原始尺寸更大的尺寸显示，图像将出现极大的像素化。
实际上有一种方法可以仅使用html来实现这一点。刚刚设置：

尝试在css3中使用缩放属性：

原价的75%：

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

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

原价的50%：

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

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

哦，哇！：）谢谢你，我想知道这是为什么？这是因为拥有40%的图像高度和70%的宽度，比如说，实际上并不经常发生吗？不幸的是，它不是这样工作的-您的图像将是其父容器高度的50%，而不是其像素尺寸的50%。不过，Fosco在倾斜方面是正确的-只指定一个将使您的图像与其原始尺寸保持比例。但是我猜，如果您只指定一个或另一个，那么它只影响属性所属的元素。@BOSS:我使用width=“50%”制作了一个简单的test.html和img与img的大小完全相同，width=“50%”height=“50%”。这很奇怪，可能是因为您的容器上没有任何格式，因为我的容器可能会弄坏图像。@老板：我想在我的测试用例中，这是因为我使用的图像恰好与包含元素具有相同的纵横比。无论如何，百分比设置将图像大小设置为两种情况下（仅宽度或高度与宽度和高度）包含元素大小的百分比，而不是图像大小的百分比。对于jQuery resize，您是否必须对图像应用标记？否，我的示例中的jqueryresize将页面上的所有图像调整为50%宽度。如果你只想做一个特定的图像，你需要用一个id或类来定位它<代码>变量$img=$（“#imgId”）$img.width（$img.width（）*.5）
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);