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

Question

如何设置图片的最大高度或宽度：

$img_attributes = ' height=100 width=100 max-height=500 max-width=500 '. 'alt="'.$product['product_name'].'"';

- Chris

---

你是在说 PHP 还是 HTML？ 在 HTML 中，你可以只设置高度而不提及宽度。 如果你在 PHP 中，你需要像 AlbertEins 这样的函数。 - MindStalker

Answer 1

嗯，有 max-height 和 max-width CSS 属性对吧？它们在除了IE 6和IE 7以外的所有主流浏览器中都可以使用。

- Pekka

---

嗨，Pekka，我还没有测试过，但这个可以工作吗？$img_attributes= ' max-height=100 max-width=100 '. 'alt="'.$product['product_name'].'"'; - Chris

不行，你需要添加一个样式: style='max-height: 100px; max-width: 100px'。 - Pekka

为了使其正常工作，您不能在img标签本身上设置宽度或高度。 - Staysee

@Staysee，你可以这样做，但它必须是相对大小（如百分比）。 - Pekka

如果我在CSS中使用max-height或max-width，它会起作用。但是如果我在同一个对象上同时使用两者，它们都会被忽略。 - Viliam

是啊，太愚蠢了！！！！！为什么SE上的每个人都要有这种傲慢的态度？ - Christine

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;

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

- Patrick Desjardins

Answer 3

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

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

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

- Brian Hasden

---

问题是，如果图像在宽度和高度上都更大，但不是正方形。 - Adriano Varoli Piazza

你会得到一个循环吗？ - Chris

没关系。如果你想限制高度或宽度，可以使用max-height和max-width样式。如果图像在垂直方向上较大，则将限制为指定的最大高度并适当缩放。同样适用于宽度。比例不会改变。 - Brian Hasden

我不确定你所说的“loop”是什么意思？我在谈论CSS，而不是代码。CSS限制了图像的显示大小。它是在客户端确定的，而不是服务器端，并且实际上没有执行路径可以循环。 - Brian Hasden

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％，但高度受限，这可能导致图像失真。在第一种情况下，宽度设置了最大限制，高度相应地调整，从而保留了图像尺寸。

- Joris Meys