Если изображение слишком большое, как мне уменьшить размер?

Question

Мой веб-сайт

По приведенной выше ссылке вы видите, что в средней новостной ленте изображение слишком велико.Информация для новостей извлекается из базы данных, поэтому я не уверен, как изменить ширину изображения только на определенных изображениях.В идеале я хотел бы, чтобы любое изображение шириной более 300 пикселей сохранялось на уровне 300 пикселей.Это то, что у меня есть:

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

Я устал добавлять ширину = "300" к приведенному выше утверждению, но это сделало ВСЕ изображения размером 300 пикселей, что мне не нужно.Я хочу, чтобы изображения размером более 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)

Но одна вещь, размер изображения (КБ) не уменьшается. Я надеюсь, что это поможет вам.

Answer 3

Почему бы не добавить специальную процедуру для макета изображений новостей, определить максимальный размер внутри нее и вызвать ее для связанных изображений?