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

Question

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

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

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

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

现在，在尝试通过百分比缩小比例（例如一半）时：

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

我得到的结果与以下内容完全不同：

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

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

Answer 1

注意：直接提供百分比作为 width 或 height 属性是无效的，除非您使用 HTML 4.01（请参阅当前规范，过时规范和此答案了解更多信息细节）。话虽这么说，浏览器通常会容忍这种行为以支持向后兼容性。

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

<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 中使用缩放属性：

原始值的 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

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

例子：

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

Answer 6

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

Answer 7

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

Answer 8

来自 W3Schools

包含元素的高度百分比（例如“20% ").

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

Answer 9

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

PS。这些类是引导程序。

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

Answer 10

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