以百分比形式指定宽度和高度，而不扭曲 HTML 中的照片比例

Question

我想知道在宽度和高度

<img>

属性中，我是否可以将宽度和高度指定为百分比？

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

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

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

现在，在尝试缩小规模时，比如通过百分比缩小一半：

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

我得到的东西与：

完全不同

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

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

Answer 1

注意：除非您使用 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% 的属性。

Answer 2

您可以设置其中之一（但不能同时设置两者），这应该会得到您想要的结果。

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

Answer 3

区别如下：

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

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

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

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

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

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

Answer 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);

Answer 5

如果我没有记错的话，

width="50%" 和 height="50%" 将宽度和高度属性设置为父元素宽度和高度的一半。另外，如果您使用百分比，则仅设置宽度或高度应将宽度或高度设置为父元素的百分比。

Answer 6

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

Answer 7

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

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

Answer 8

不确定这是否正是您想要的，但为什么不直接使用内联 CSS？

示例：

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

Answer 9

对我来说就是这样，vh就像这里的父母百分比一样。

PS。 这些类是引导程序。

<div class="container align-items-center h-auto">
    <img src="/logo.png" height="55vh" />
</div>

Answer 10

实际上有一种方法可以仅使用 html 来做到这一点。刚刚设置：

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