当前位置：文江博客话题详情

调整图像大小

发布于 2024-08-02 09:25:09 字数 240 浏览 5 评论 0原文

我正在用 PHP 开发一个论坛应用程序。在签名字段中我有
"bla blah"

如果图像比字段大，它会拉伸我的表格并且看起来很糟糕。如果图片太大，有什么办法可以调整大小吗？

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

编辑：问题是，这不仅仅是图像。这是图像和文本“大文本”。

谨致，汤姆

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城半夏 2024-08-09 09:25:09

PHP...

您可以使用 gdlibrary 调整图像大小（请参阅：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; }

这将隐藏大图像，而不是而不是允许他们歪曲您的内容。

PHP...

You can re-size images with the gdlibrary (See: PHP/GD - Cropping and Resizing Images), but that may be complicated if you're not already pretty familiar with PHP.

jQuery/Javascript

A plugin exists that can dynamically resize images (stretching the image itself). Check out maxSide: http://css-tricks.com/maxside-jquery-plugin-and-how-to/

CSS...

A quick-solution for keeping the signature imaged tamed is to restrict their overflow with css:

<img src="randomimage.png" />

Becomes

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

With the following CSS:

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

This will hide large images, rather than allowing them to distort your content.

回复收藏 0 原文

留蓝 2024-08-09 09:25:09

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

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

回复收藏 0 原文

习惯那些不曾习惯的习惯 2024-08-09 09:25:09

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

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

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

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

Height and Width are in pixels. This is if you want to resize the image in HTML (which downloads the full image then "squishes" it around to the specified sizes).

If you want to programmatically alter the physical image file, check out the PHP GD functions: http://us.php.net/manual/en/ref.image.php

回复收藏 0 原文

仙气飘飘 2024-08-09 09:25:09

对于我管理的论坛，我们将签名块放置在 div 中，并在 CSS 中设置了 overflow:hidden。这样，输入大量 600x300 签名图像和一段文本的用户不会从中获得任何好处 - 只显示指定的 400x90 区域。看起来效果很好。

回复收藏 0 原文

夏末的微笑 2024-08-09 09:25:09

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

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

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

As JoshL and John T pointed out, you can use php's built in image handling support to dynamically alter images. In your situation, you could simply make a php script that will load the image, resize it to appropriate dimensions, serve it and save a cached copy of the resized image to avoid processing overhead on subsequent requests.

You would end up using something like this in your HTML code

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

回复收藏 0 原文

无妨# 2024-08-09 09:25:09

使用 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 也发布了这种方法...抱歉，我在发布之前没有注意到。

Using Javascript:

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

Example HTML:

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

EDIT: It looks like John T also posted this way of doing it... Sorry I didn't notice it before posting.

回复收藏 0 原文

相守太难 2024-08-09 09:25:09

使用 css

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

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

Using css

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

This works in all the browsers I have tested

回复收藏 0 原文

内心旳酸楚 2024-08-09 09:25:09

     <!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>

     <!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 原文

~没有更多了~