调整图像大小

时间:2009-08-18 18:37:15

标签: php image resize forum stretch

我正在使用PHP的论坛应用程序。在签名字段我有 “<img src='randomimage.png'><br>bla blah

如果图像比字段大,它会拉伸我的表并看起来很糟糕。如果图像太大,有没有办法重新调整图像大小?

抱歉我的英语不好,谢谢你的阅读

编辑:问题在于它不仅仅是形象。这是图像和文本“大文本”。

尊敬地,汤姆

8 个答案:

答案 0 :(得分:4)

PHP ...

您可以使用gdlibrary重新调整图像大小(请参阅:PHP/GD - Cropping and Resizing Images),但如果您还不熟悉PHP,则可能会很复杂。

jQuery的/使用Javascript

存在可以动态调整图像大小的插件(拉伸图像本身)。查看maxSide:http://css-tricks.com/maxside-jquery-plugin-and-how-to/

CSS ...

保持签名图像被驯服的快速解决方案是用css限制它们的溢出:

<img src="randomimage.png" />

变为

<div class="sigBox"><img src="randomimage.png" /></div>

使用以下CSS:

div.sigBox { overflow:hidden; width:50px; height:50px; }

这会隐藏大图片,而不是让它们扭曲你的内容。

答案 1 :(得分:3)

您可能首先要拍摄图像尺寸。然后,您可以通过img标记的简单HTML 高度宽度属性设置新大小来保持宽高比。

您可能还想考虑在本地托管签名。当用户上传图片时,您可以通过GD Library完成所有尺寸调整。

答案 2 :(得分:0)

<img src="/img/foo.png" height="100" width="100" />

高度和宽度以像素为单位。这是如果你想用HTML调整图像的大小(下载完整的图像,然后“搜索”它到指定的大小)。

如果要以编程方式更改物理映像文件,请查看PHP GD函数:http://us.php.net/manual/en/ref.image.php

答案 3 :(得分:0)

对于我管理的论坛,我们将签名块放在div中,并在CSS中设置overflow: hidden。这样,投入大量600x300签名图像和一段文本的用户就没有从中获益 - 只有400x90区域显示出来。似乎运作良好。

答案 4 :(得分:0)

正如JoshL和John T所指出的,你可以使用php的内置图像处理支持来动态改变图像。在您的情况下,您可以简单地制作一个PHP脚本来加载图像,将其调整到适当的尺寸,提供它并保存已调整大小的图像的缓存副本,以避免后续请求的处理开销。

您最终会在HTML代码中使用类似的内容

<img src="img.php?file=foobar.jpg">

答案 5 :(得分:0)

使用Javascript:

function changeSize(imageOrTextId, tableId)
{
    if (document.getElementById(imageOrTextId).width > document.getElementById(tableId).width)
    {
        document.getElementById(imageOrTextId).width = document.getElementById(tableId).width;
    }
}

示例HTML:

<body onload="changeSize('image1', 'table1')">
    <table id="table1" width="400" height="400">
        <img src="randomimage.png" id="image1" />
    </table>
</body>

编辑:看起来John T也发布了这样做的方式...抱歉,在发布之前我没有注意到它。

答案 6 :(得分:0)

使用css

<img src="randomimage.png" style="max-width:100px;max-height:100px;" />

这适用于我测试过的所有浏览器

答案 7 :(得分:0)

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
             <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        </head>

       <body>
        <?php
      $thumb_width = 100;
      $thumb_height = 100;
        $full = imagecreatefromjpeg('sample.jpg');
        $width = imagesx($full);
     $height = imagesy($full);

      if($width < $height) {
$divisor = $width / $thumb_width;
       } 
       else {
$divisor = $height / $thumb_height;
     }

    $new_width= ceil($width / $divisor);
  $new_height = ceil($height / $divisor);

  //get center point
  $thumbx = floor(($new_width - $thumb_width) / 2);
  $thumby = floor(($new_height - $thumb_height)/2);

 $new_image = imagecreatetruecolor($new_width, $new_height);
  $new_image_fixed = imagecreatetruecolor($thumb_width, $thumb_height);

   imagecopyresized($new_image, $full, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

   imagecopyresized($new_image_fixed, $new_image, 0, 0, $thumbx, $thumby, $thumb_width,                                      $thumb_height, $thumb_width, $thumb_height);

     imagejpeg($new_image, "new_sample.jpg", 100);
    imagejpeg($new_image_fixed, "new_sample_fixed.jpg", 100);
     ?>
     </body>
      </html>