将宽度和高度指定为百分比，而不会在 HTML 中倾斜照片比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3396475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying width and height as percentages without skewing photo proportions in HTML
提问by Qcom
I was wondering if in the width and height <img>attributes, I could specify width and height as percentages?
我想知道是否在宽度和高度<img>属性中，我可以将宽度和高度指定为百分比？
Well, I guess that is obvious, because when I try so, it resizes, but it appears to skew the quality of my image.
嗯，我想这是显而易见的，因为当我尝试这样做时，它会调整大小，但它似乎扭曲了我的图像质量。
Here is an example of my markup with fixed attributes:
这是我的带有固定属性的标记示例：
<img src="#" width="346" height="413">
Now, while trying to scale this down, say by half, via percentages:
现在，在尝试将其缩小时，例如通过百分比缩小一半：
<img src="#" width="50%" height="50%">
I get something completely different than:
我得到的东西与以下完全不同：
<img src="#" width="173" height="206.5">
I think I'm just fundamentally mistaking my percentage markup or something because there is a noticeable difference between my second and third example visually.
我想我只是从根本上误解了我的百分比标记或其他东西，因为我的第二个和第三个示例在视觉上存在明显差异。
回答by Pat
Note: it is invalid to provide percentages directly as <img>widthor heightattribute unless you're using HTML 4.01 (see current spec, obsolete specand this answerfor more details). That being said, browsers will often tolerate such behaviour to support backwards-compatibility.
注意：除非您使用 HTML 4.01（有关更多详细信息，请参阅当前规范、过时规范和此答案），否则直接将百分比作为<img>width或height属性提供是无效的。话虽如此，浏览器通常会容忍这种行为以支持向后兼容。
Those percentage widths in your 2nd example are actually applying to the container your <img>is in, and not the image's actual size. Say you have the following markup:
第二个示例中的那些百分比宽度实际上适用于您所在的容器<img>，而不是图像的实际大小。假设您有以下标记：
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
Your resulting image will be 500px wide and 300px tall.
您生成的图像将是 500 像素宽和 300 像素高。
jQuery Resize
jQuery 调整大小
If you're trying to reduce an image to 50% of its width, you can do it with a snippet of jQuery:
如果您想将图像缩小到其宽度的 50%，您可以使用一段 jQuery 来实现：
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
Just make sure you take off any height/width = 50% attributes first.
只要确保你先去掉任何高度/宽度 = 50% 的属性。
回答by Fosco
You can set one or the other (just not both) and that should get the result you want.
您可以设置一个或另一个（只是不是两个），这应该会得到您想要的结果。
<img src="#" height="50%">
回答by Fenton
Here is the difference:
这是区别：
This sets the image to half of its original size.
这会将图像设置为其原始大小的一半。
<img src="#" width="173" height="206.5">
This sets the image to half of its available presentation area.
这会将图像设置为其可用演示区域的一半。
<img src="#" width="50%" height="50%">
For example, if you put this as the only element on the page, it would attempt to take up 50% of the width of the page, thus making it potentially larger than its original size - not half of its original size as you are expecting.
例如，如果您将此作为页面上唯一的元素，它将尝试占据页面宽度的 50%，从而使其可能大于其原始大小 - 而不是您期望的原始大小的一半.
If it is being presented at larger than original size, the image will appear greatly pixelated.
如果以大于原始尺寸呈现，图像将显得像素化。
回答by Nalan Madheswaran
Try use scale property in css3:
尝试在 css3 中使用 scale 属性：
75% of original:
原版的 75%：
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
50% of original:
原版的 50%：
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
回答by pkauko
width="50%" and height="50%" sets the width and height attributes to half of the parent element's width and height if I'm not mistaken. Also setting just width or height should set the width or height to the percentage of the parent element, if you're using percents.
如果我没记错的话，width="50%" 和 height="50%" 将宽度和高度属性设置为父元素宽度和高度的一半。如果您使用百分比，也只设置宽度或高度应该将宽度或高度设置为父元素的百分比。
回答by Lazarus
Given the lack of information regarding the original image size, specifying percentages for the width and height would result in highly erratic results. If you are trying to ensure that an image will fit within a specific location on your page then you'll need to use some server side code to manage that rescaling.
鉴于缺乏有关原始图像大小的信息，指定宽度和高度的百分比会导致结果非常不稳定。如果您试图确保图像适合您页面上的特定位置，那么您需要使用一些服务器端代码来管理该重新缩放。
回答by JavaPete
回答by Gilgamesh
There is actually a way to do this with html only. Just sets:
实际上有一种方法可以只用 html 来做到这一点。只需设置：
<img src="#" width height="50%">
<img src="#" width height="50%">
