image - 如果图像太大，如何减小尺寸？

Question

我的网站

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

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

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

有人可以指出我正确的方向吗！

Answer 1

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

img {
  max-width:300px;
}

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

Answer 2

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

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）并没有减少的一件事。我希望它对你有所帮助。

Answer 3

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