logo标签列表

调整图像大小

phpimageresizeforumstretch
3
我正在使用PHP开发论坛应用程序。在签名字段中，我有以下内容：
"<img src='randomimage.png'><br>bla blah"

如果图片太大，它会拉伸我的表格并且看起来很糟糕。是否有任何方法可以重新调整图片大小，使其适合字段？

抱歉我的英语不好，感谢您的阅读。

编辑：问题不仅仅是图片，还有文本“the big text”。

敬礼，汤姆

8个回答
4

PHP...

您可以使用gd库（参见：PHP/GD - 裁剪和调整图像大小）来重新调整图像大小，但如果您对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; }

这将隐藏大型图片，而不是允许它们扭曲您的内容。

3

您可能首先想要获取图像的尺寸。然后，您可以通过简单的HTML height和width属性设置img标签的新大小，同时保持长宽比。

您也可以考虑在本地托管签名。当用户上传图像时，您可以通过GD Library进行所有调整大小。

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

高度和宽度以像素为单位。如果您想在HTML中调整图像大小（下载完整图像，然后将其“压缩”到指定的大小），则可以使用此选项。

如果您想通过编程方式更改物理图像文件，请查看PHP GD函数：http://us.php.net/manual/en/ref.image.php

0
正如JoshL和John T所指出的那样，您可以使用php内置的图像处理支持来动态地修改图像。在您的情况下，您可以简单地制作一个php脚本，加载图像，将其调整为适当的尺寸，提供服务并保存缩小后的图像的缓存副本，以避免在后续请求中进行处理开销。
您最终会在HTML代码中使用类似于以下内容的东西。
<img src="img.php?file=foobar.jpg">
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也贴出了这样做的方式……很抱歉我在发布之前没有注意到。

0

使用 CSS

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

我已经测试过，这在所有浏览器中都可以正常工作。

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>
0
对于我管理的论坛，我们将签名块放在一个带有CSS中设置了overflow: hidden的
中。这样，用户如果放入了一个巨大的600x300签名图片和一段文字，也不会从中获得任何好处——只有指定的400x90区域会显示出来。看起来效果很好。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接