Question

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

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

我厌倦了将width =“300”添加到上面的语句中，但这使得所有图像都变成300px，这是我不想要的。我只想要大于300px的图像减少到300。

请有人指出我正确的方向！

Answer 1

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

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并为相关图像调用它？

如果图像太大，我该如何减小尺寸？

3 个答案: