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

如何设置以下各项的最大高度或宽度：

---

$img_attributes='height=100 width=100'alt=“”.$product['product_name'].'”

嗯，有

max height

和

max width

CSS属性，不是吗？它们适用于除IE6和IE7之外的所有主要浏览器。

您应该检查此答案以了解一般信息：

如果您希望在不使用服务器端的情况下调整图像大小，我建议您使用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;

---

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

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

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

IMG.MaxSized
{
最大宽度：100px；
最大高度：100px；
}

---

正如Pekka所提到的，为了在IE的现代版本中工作，您必须有一个XHTML1.0严格的DTD，但我个人认为这是合适的方法。

正如上面的答案所说，您可以使用

max height

或

max width

CSS属性。但这些属性的行为方式不同。要保持图像的比例，必须将高度和宽度设置为100%，然后设置

max width

。如果设置了

max height

，则不会保留该比率

因此：

确实保持了这个比例，但是

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

---

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

您是说PHP还是HTML？在HTML中，您可以只设置高度，而不必提及宽度。如果你在PHP中需要像AlbertEinsHi Pekka这样的函数，我还没有对它进行测试，但这能工作吗$img_属性='最大高度=100最大宽度=100'alt=“”.$product['product_name'].'”；不，您需要添加一个

style

：

style='max-height:100px；最大宽度：100px'

若要使其工作，您不能在img标记本身上设置宽度或高度。@请注意，您可以，但它必须是相对大小（如%）。如果我在css中使用最大高度或最大宽度，它就工作了。但如果我在同一个物体上同时使用这两个，这两个都会被忽略。问题是，如果图像的宽度和高度都较大，但不是正方形。你会得到一种循环吗？那没关系。如果要限制高度或宽度，可以使用“最大高度”和“最大宽度”样式。如果图像在垂直方向上较大，它将被限制在指定的最大高度，并进行适当的缩放。宽度也一样。比例不变，我不知道你说的循环是什么意思？我说的是CSS，不是代码。CSS限制图像的显示大小。它是在客户端而不是服务器端确定的，并且实际上没有循环的执行路径。

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