web-dev-qa-db-ja.com

比率を維持しながら、純粋なHTML / CSSで画像のサイズを変更するにはどうすればよいですか？

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

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

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

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

そのようなことをする関数を作成し（「切り抜き」を除く）、それは_width="" height=""_だけを返し、この<img src="image.jpg" resize("image.jpg") />のように使用しますが、どうすればよいかわかりません。その作物...

ありがとう

htmlcssimage-resizing
9
kmunky

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

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

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

14
kmunky

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

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

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

1
Johannes Gorset

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

1
Chetan Sharma

ImageMagickは「サイズを合わせてサイズを変更する」メソッドと「塗りつぶすためにサイズを変更する」メソッドをサポートしていると思います。

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

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

1
hurikhan77

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

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

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

0
zerkms