3

私はPHPのフォーラムアプリケーションに取り組んでいます。署名欄に
「<img src='randomimage.png'><br>bla blah」

画像がフィールドよりも大きい場合、テーブルが伸びて見栄えが悪くなります。画像が大きすぎる場合、画像のサイズを変更する方法はありますか？

英語が下手でごめんなさい、読んでくれてありがとう

編集：問題は、それが画像だけではないということです。それは画像とテキスト「ビッグテキスト」です。

敬具、トム

4

8 に答える 8

4

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; }

これにより、大きな画像がコンテンツを歪めるのではなく、非表示になります。

于 2009-08-18T18:40:45.123 に答える
3

おそらく最初に画像の寸法を取得することをお勧めします。次に、タグの単純なHTMLの高さと幅の属性を使用して新しいサイズを設定しながら、アスペクト比を維持できます。img

署名をローカルでホストすることを検討することもできます。ユーザーが画像をアップロードすると、 GDライブラリを介してすべてのサイズ変更を行うことができます。

于 2009-08-18T18:38:54.457 に答える
0 
<img src="/img/foo.png" height="100" width="100" />

高さと幅はピクセル単位です。これは、画像のサイズをHTMLで変更する場合です（画像全体をダウンロードしてから、指定したサイズに「スクイーズ」します）。

プログラムで物理イメージファイルを変更する場合は、PHP GD関数を確認してください：http：//us.php.net/manual/en/ref.image.php

于 2009-08-18T18:40:56.417 に答える
0

私が管理したフォーラムでは、CSSのdivwithセットに署名ブロックを配置しました。overflow: hiddenそうすれば、600x300の巨大な署名画像とテキストの段落を入力したユーザーは、そうすることで何のメリットも得られませんでした。指定された400x90の領域のみが表示されました。うまく機能しているようです。

于 2009-08-18T18:46:38.997 に答える
0

JoshLとJohnTが指摘したように、phpに組み込まれている画像処理サポートを使用して、画像を動的に変更できます。あなたの状況では、画像をロードし、適切なサイズにサイズ変更し、提供し、サイズ変更された画像のキャッシュされたコピーを保存するphpスクリプトを作成するだけで、後続のリクエストでの処理オーバーヘッドを回避できます。

HTMLコードでこのようなものを使用することになります

<img src="img.php?file=foobar.jpg">
于 2009-08-18T18:53:47.500 に答える
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>

編集：ジョンTもこの方法で投稿したようです...申し訳ありませんが、投稿する前に気づいていませんでした。

于 2009-08-18T19:01:09.620 に答える
0

cssを使用する

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

これは、私がテストしたすべてのブラウザで機能します

于 2013-05-02T11:13:42.977 に答える
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>
于 2013-09-29T09:47:10.867 に答える