Блог

Мой веб-сайт

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

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

Я устал добавлять width = «300» к приведенному выше заявлению, но из-за этого ВСЕ изображения стали размером 300 пикселей, чего я не хочу. Я хочу, чтобы изображения размером более 300 пикселей были уменьшены до 300.

Может кто-нибудь указать мне правильное направление, пожалуйста!

Если вы не хотите физически изменять размер изображений на сервере, что было бы идеальным решением, вы можете установить max-width свойство с помощью CSS.

 img {
  max-width:300px;
}
  

Обратите внимание, что это свойство не поддерживается в IE6 и ниже.

Код помогает изменить размер изображения. его изменение размера по высоте и ширине зависит от максимальной ширины

 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)
  

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

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