html - 如何为 $img 设置最大高度但保持比例

Question

如何设置最大高度或宽度：

$img_attributes='高度=100 宽度=100'。'alt="'.$product['product_name'].'"';

Answer 1

嗯，有max-height和max-widthCSS 属性，不是吗？它们适用于除 IE 6 和 IE 7 之外的所有主流浏览器。

Answer 2

您应该检查此答案以获取一般信息：按比例调整图像大小。

如果您想在不使用服务器端的情况下调整图像大小，我建议您使用 Javascript。这是一个教程。

简而言之，您有一个 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];
}

使用此功能，您可以设置图像的宽度和高度：

img.width = newW;
img.height = newH;

但是，最好的方法是在服务器端进行。这将防止对客户端产生奇怪的影响。

Answer 3

以下样式将导致使用“MaxSized”css 类的所有图像的最大高度为 100 像素，最大宽度为 100 像素。如果图像较小，则不会被拉伸。

<style>
IMG.MaxSized
{
max-width: 100px;
max-height: 100px;
}
</style>

正如 Pekka 所提到的，您必须拥有 XHTML 1.0 Strict DTD 才能使其在现代版本的 IE 中工作，但我个人认为这是合适的方法。

Answer 4

正如最佳答案所说，您可以使用max-height或max-widthCSS 属性。但是这些属性的行为方式不同。要保持图像的比例，您必须将高度和宽度设置为 100%，然后设置max-width. 如果您设置max-height了比率，则不会保留。

所以：

<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>

确实保留了比率，但是

<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>

才不是。这是因为（据我了解）HTML 将首先设置宽度，然后设置高度。所以在第二种情况下，宽度设置为 100%，但高度有限，这可能会导致图像失真。在第一种情况下，将宽度设置为最大限制，并相应地调整高度，从而保留图像尺寸。