将宽度和高度指定为百分比而不在 HTML 中倾斜照片比例

Posted 2023-02-23

【中文标题】将宽度和高度指定为百分比而不在 HTML 中倾斜照片比例

【英文标题】：Specifying width and height as percentages without skewing photo proportions in HTML

【发布时间】：2011-03-24 17:07:10

【问题描述】：

我想知道在宽度和高度<img> 属性中是否可以将宽度和高度指定为百分比？

嗯，我想这很明显，因为当我尝试这样做时，它会调整大小，但它似乎会扭曲我的图像质量。

这是我的带有固定属性的标记示例：

<img src="#"  >

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

<img src="#"  >

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

<img src="#"  >

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

【参考方案1】：

注意：除非您使用 html 4.01，否则直接提供百分比为 <img> width 或 height 属性是无效的（请参阅 current spec、obsolete spec 和 @987654323 @ 更多细节）。话虽如此，浏览器通常会容忍这种行为以支持向后兼容性。

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

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

生成的图像将是 500 像素宽和 300 像素高。

jQuery 调整大小

如果您想将图像缩小到其宽度的 50%，您可以使用 jQuery 的 sn-p 来实现：

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

只要确保你首先去掉任何高度/宽度 = 50% 的属性。

【讨论】：

对于 jQuery 调整大小，您必须对图像应用标签吗？

不，在我的示例中，jQuery 调整大小会将页面上的所有图像调整为 50% 宽度。如果您只想制作特定图像，则需要使用 id 或类来定位它； var $img = $( "#imgId" ); $img.width( $img.width() * .5 );

【参考方案2】：

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

<img src="#" >

【讨论】：

哇哦！ :) 谢谢你，我想知道为什么会这样？是不是因为图像的 40% 的高度和 70% 的宽度可以说，真的很少发生？

不幸的是，它不能那样工作 - 您的图像将是其父容器的 50% 高度，而不是其像素尺寸的 50%。然而 Fosco 适合倾斜 - 仅指定一个将使您的图像保持与其原始尺寸成比例。

【参考方案3】：

这里有区别：

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

<img src="#"  >

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

<img src="#"  >

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

如果以大于原始尺寸的方式呈现，图像会出现很大的像素化。

【参考方案4】：

尝试在 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);

【参考方案5】：

和 如果我​​没记错的话，将宽度和高度属性设置为父元素宽度和高度的一半。如果您使用百分比，那么仅设置宽度或高度应将宽度或高度设置为父元素的百分比。

【讨论】：

但我猜如果你只指定一个或另一个，那么它只会影响属性所归属的元素。

@BOSS：我做了一个简单的test.html，宽度为“50%”的img和 的img大小一模一样。跨度>

这很奇怪，可能是因为您的容器上没有任何格式，因为我的容器可能搞砸了图像。

@BOSS：我认为在我的测试案例中，这是因为我使用的图像恰好与包含元素具有相同的纵横比。无论如何，百分比设置在两种情况下都将图像大小设置为包含元素大小的百分比（只有宽度或高度与宽度和高度），而不是图像大小的百分比。

【参考方案6】：

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

【参考方案7】：

来自W3Schools

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

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

【参考方案8】：

实际上有一种方法可以仅使用 html 来执行此操作。只是设置：

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