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

Question

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

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

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

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

现在，在尝试按比例缩小时，比如通过百分比缩小一半:

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

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

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

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

Answer 1

注意:直接提供百分比为<img>是无效的width或 height属性，除非您使用的是 HTML 4.01(有关详细信息，请参阅 current spec、obsolete spec 和 this answer)。也就是说，浏览器通常会容忍这种行为以支持向后兼容。

第二个示例中的那些百分比宽度实际上是应用于您的容器 <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 );
});

只要确保先取消所有 height/width = 50% 属性即可。