Question

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

$ img_attributes ='height = 100 width = 100'。的 'ALT = “'。$产物[ 'PRODUCT_NAME'] '”';

Answer 1

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

Answer 2

您应该查看此答案以获取一般信息：Proportional image resize。

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

简而言之，你有一个JavaScript函数将返回新的Width和Height：

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类的所有图像的最大高度为100px，最大宽度为100px。如果图像较小，则不会被拉伸。

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

正如Pekka所提到的，你必须拥有一个XHTML 1.0严格的DTD才能在IE的现代版本中运行，但我个人认为这是合适的方法。

Answer 4

正如最佳答案所述，您可以使用max-height或max-width CSS属性。但这些属性不会以同样的方式表现。要保持图像的比例，您必须将高度和宽度设置为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％但高度有限，这可能导致图像扭曲。在第一种情况下，宽度设置为最大限制，并相应调整高度，从而保留图像尺寸。

如何设置$ img的最大高度但保持比例

4 个答案: