Html 如何为 $img 设置最大高度但保持比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1948249/
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
How to set maximum height for $img but keep proportions
提问by Chris
How to set maximum height or width for:
如何设置最大高度或宽度：
$img_attributes= ' height=100 width=100 '. 'alt="'.$product['product_name'].'"';
$img_attributes=' 高度=100 宽度=100 '。'alt="'.$product['product_name'].'"';
回答by Pekka
Well, there are the max-heightand max-widthCSS properties, aren't they? THey work in all major browsers except IE 6 and in IE 7.
嗯，有max-height和max-widthCSS 属性，不是吗？它们适用于除 IE 6 和 IE 7 之外的所有主要浏览器。
回答by Patrick Desjardins
You should check this answer for general information : Proportional image resize.
您应该检查此答案以获取一般信息：比例图像调整大小。
If you want to have an image resized without using server side I suggest you to user Javascript. Here is a tutorial.
如果您想在不使用服务器端的情况下调整图像大小，我建议您使用 Javascript。这是一个教程。
In short you have a JavaScript function that will return the new Width and Height:
简而言之，您有一个返回新宽度和高度的 JavaScript 函数：
function scaleSize(maxW, maxH, currW, currH){
var ratio = currH / currW;
if(currW >= maxW){
currW = maxW;
currH = currW * ratio;
} else >if(currH >= maxH){
currH = maxH;
currW = currH / ratio;
}
return [currW, currH];
}
With this function you can set the image width and height:
使用此功能，您可以设置图像的宽度和高度：
img.width = newW;
img.height = newH;
But, the best way would be to do it at server side. This will prevent to have a weird effect on client side.
但是，最好的方法是在服务器端进行。这将防止对客户端产生奇怪的影响。
回答by Brian Hasden
The following style will cause all images using the "MaxSized" css class to have a max height of 100px and a max width of 100px. If an image is smaller, it will not be stretched.
以下样式将导致所有使用“MaxSized”css 类的图像的最大高度为 100 像素，最大宽度为 100 像素。如果图像较小，则不会拉伸。
<style>
IMG.MaxSized
{
max-width: 100px;
max-height: 100px;
}
</style>
As mentioned by Pekka, you'll have to have a XHTML 1.0 Strict DTD in order for this to work in modern versions of IE, but I personally believe this is the appropriate approach.
正如 Pekka 所提到的，你必须有一个 XHTML 1.0 Strict DTD 才能在现代版本的 IE 中工作，但我个人认为这是合适的方法。
回答by Joris Meys
As the top answer says, you can use max-heightor max-widthCSS properties. But these properties don't behave in the same way. To keep the ratio of the image, you have to set height and width to 100%, and then set max-width. If you set max-heightthe ratio is not preserved.
正如顶级答案所说，您可以使用max-height或max-widthCSS 属性。但是这些属性的行为方式不同。要保持图像的比例，您必须将高度和宽度设置为 100%，然后设置max-width. 如果您设置max-height了比率，则不会保留。
So:
所以：
<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>
does preserve the ratio, but
确实保留了比例，但是
<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>
does not. This is because (as far as I understood) HTML will first set the width and then the height. So in the second case the width is set at 100% but the height is limited, which might result in distorting the image. In the first case, the width is set with a maximum limit, and the height is adjusted accordingly, hence preserving the image dimensions.
才不是。这是因为（据我所知）HTML 将首先设置宽度，然后设置高度。因此，在第二种情况下，宽度设置为 100%，但高度有限，这可能会导致图像失真。在第一种情况下，宽度设置为最大限制，高度相应调整，从而保留图像尺寸。
