IF image is too big, how do I reduce the size?

My Website

On the above link you can see that the middle news post has an image that is just too big. The info for the news is taken out of a database so I'm not sure how to change the width of the image on only certain images. Ideally I'd like to have any image that is over 300px wide to be kept at 300px. This is what I have so far:

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

I tired adding width="300" to the above statement b开发者_JAVA百科ut that made ALL of the images become 300px which I don't want. I only want images bigger than 300px to be reduced to 300.

Can someone point me in the right direction please!

If you don't want to physically resize the images on the server, which would be the ideal solution, you can set the max-width property via CSS.

img {
  max-width:300px;
}

Note that the property is not supported in IE6 and below.

The code helps to resizing the image. its resize the height and width depends upon the max width

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)

But one thing the image size(KB) is not reduce. I hope its help to you .

Why not to add a special routine for news images layout, define max-size within it and call it for the related images?