如果图像太大，如何减小尺寸？答案

【问题标题】：IF image is too big, how do I reduce the size?如果图像太大，如何减小尺寸？
【发布时间】：2011-08-02 01:54:51
【问题描述】：

在上面的链接中，您可以看到中间新闻帖子的图片太大了。新闻的信息是从数据库中取出的，所以我不确定如何仅在某些图像上更改图像的宽度。理想情况下，我希望将任何超过 300 像素宽的图像保持在 300 像素。这是我目前所拥有的：

echo '<img src="media/'.$row['media1'].'" class="floatLeftClear" id="border">';

我厌倦了在上面的语句中添加 width="300" 但这使得所有图像都变成了 300 像素，这是我不想要的。我只希望将大于 300 像素的图像缩小到 300。

有人能指点我正确的方向吗！

【问题讨论】：

您需要使用GD Library of PHP 或一些JavaScript 解决方案，如果图片高于该尺寸，则将其设置为适当的尺寸。

标签： image reduce image-size

【解决方案1】：

代码有助于调整图像大小。它的调整高度和宽度取决于最大宽度

function fixImgs(whichId, maxW) {
  var pix=document.getElementById(whichId).getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}


fixImgs('photos', 108);  // ('element ID', maximum width)

但是图像大小（KB）并没有减少的一件事。希望对你有所帮助。

【讨论】：

【解决方案2】：

为什么不为新闻图像布局添加一个特殊的例程，在其中定义 max-size 并为相关图像调用它？

【讨论】：

【解决方案3】：

如果您不想在服务器上物理调整图像大小，这将是理想的解决方案，您可以通过 CSS 设置 max-width 属性。

img {
  max-width:300px;
}

请注意，IE6 及以下版本不支持该属性。

【讨论】：