10

HTML / CSSのみを使用して（つまり、サーバーコードなしで）画像のサイズを変更し、その比率を維持してトリミング効果を持たせるにはどうすればよいですか。詳細：指定された幅にサイズ変更し、比率を維持し、高さが指定された値よりも大きい場合は、指定された高さにトリミングしますか？

実際、私はいくつかのサーバーコードを使用してそれを行う方法を知っていますが、これはしたくありません。これは、別のファイル参照を使用することを意味し、のような画像を参照します<img src="picture.php" />。画像を表示するのと同じページで画像を処理する必要があります。

私を「悩ませている」のは、ページ上に他に何も表示されないように、画像ヘッダーを送信する必要があるということです。

そのようなことをする方法はありますか？たぶん純粋なHTML/CSSからですか？：P

私はそのようなことをする関数を作りました（「切り抜き」のことを除いて）そしてそれはちょうど戻りwidth="" height=""、私はそれをこのように使用します<img src="image.jpg" resize("image.jpg") />、しかし私はどうやってその切り抜きをすることができますか...

ありがとう

4

5 に答える 5

16

わかりました、それで私はhtml/cssからそれをする方法を見つけることができました。全体的なアイデアは、その「余分な高さ」を取り除くことでした：

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

最初に画像のサイズを希望の幅に変更し（比率を維持）、次にdivを含むことに固定の高さを与えsetting overflow to hidden、画像の目的の部分だけを表示するようにスクリプトを作成します。

于 2010-02-10T01:21:19.263 に答える
1

phpThumbを使用して、画像のサイズ変更とトリミングをその場で行うことができます。GDライブラリを使用して、画像JPEG、PNG、GIFなどからサムネイルを作成します。

于 2010-02-10T00:16:12.610 に答える
1

content-typeブラウザはヘッダーを解釈するためにヘッダーに依存しているため、同じファイルで画像とHTMLをレンダリングすることはできません。

HTMLドキュメントのcontent-typeヘッダーは通常、に設定されますtext/htmlが、画像のコンテンツタイプはimage/*（画像形式の代わりに*を使用）です。text/html画像データをHTMLドキュメントに印刷することもできますが、ブラウザは画像ではなく画像として解釈するように指示されているため、その内容は文字化けします。

<img>説明したように、タグをPHPファイルにリンクする必要があります。なぜそれが問題になるのかわかりません。それはそれについて行く正しい方法です。もちろん、HTMLで画像のサイズを操作して画像を切り抜くこともできますが、そうすることはお勧めしません。

于 2010-02-09T22:49:24.093 に答える
1

ImageMagickは「サイズを合わせてサイズを変更」と「塗りつぶしにサイズを変更」のメソッドをサポートしていると思います。後者はあなたが探しているものです。

imgタグを出力バッファに書き込む前に、画像を結果の提案されたファイル名に保存し、「identify」にこの画像の幅と高さを抽出させます。

別のファイルを操作したくないが、代わりに画像データをインラインにしたい場合は、新しいWebブラウザーがサポートするdata-uriメソッドを試してください。これにより、画像のバイナリデータストリームがhtmlファイル内にインライン化されるため、埋め込まれます。

于 2010-02-09T23:25:12.953 に答える
0

次のようなヘルパーを作成します。

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

したがって、このヘルパーは、サイズ変更された画像がすでに作成されているかどうかを確認するか、新しい画像を作成します。どちらの場合も、新しい画像に適切なURLを返します。

于 2010-02-09T22:53:39.010 に答える