さまざまなサイズの画像があります。また、それらの画像を配置するためのさまざまなコンテナーもあります。
例: トリミングせずに 500x500 コンテナーに配置される 680 x 1024 の画像があります。
そのため、サイズ変更された画像をその上に配置するよりも、コンテナサイズで画像を構築する必要があると考えました。
私が期待した結果はこのようなものです
またはこれ
PHPまたはワードプレスでこれを達成する最良の方法は?
さまざまなサイズの画像があります。また、それらの画像を配置するためのさまざまなコンテナーもあります。
例: トリミングせずに 500x500 コンテナーに配置される 680 x 1024 の画像があります。
そのため、サイズ変更された画像をその上に配置するよりも、コンテナサイズで画像を構築する必要があると考えました。
私が期待した結果はこのようなものです
またはこれ
PHPまたはワードプレスでこれを達成する最良の方法は?
現在、WordPress プラグイン リポジトリにあるプラグインを作成しました。
JResizr
このプラグインには、デフォルトの worpdress の動作をオーバーライドし、画像のトリミングを無効にする機能がありますが、画像のサイズを変更して、四角形のコンテナー サイズに合わせ、スペースを背景色で埋めようとします。使用する背景色を選択することもできます。
これを行うにはいくつかの方法があります。画像がほぼ適切なサイズである場合、javascript/php に代わる 1 つの方法は、具体的には CSS を使用することです。background-size: contain
含む
このキーワードは、背景画像の両方の寸法が背景配置領域の対応する寸法以下であることを保証しながら、背景画像をできるだけ大きくスケーリングする必要があることを指定します。
http://jsfiddle.net/RxTLS/で実験できます。
IE8 以下ではサポートされていませんが、これはほとんどサポートされていることに注意してください。IE ユーザーが心配な場合は、ポリフィルがいくつかあると思います。
このソリューションは、アップロードする画像が表示されるサイズに近い場合にのみ理想的です。幅/高さが 3000 ピクセルを超える画像でこれを行うことは、いくつかの理由からお勧めできません。
その場合、最初に PHP でそれらを縮小する必要があります。Wordpress から画像をアップロードする場合は、 で使用できadd_image_size
、functions.php
アップロード時に画像のサイズが自動的に変更されます。または、PHP で手動で行うこともできます。その方法については、チュートリアルがたくさんあります。私はただグーグルしPHP image resize
ます。
また、単純な timthumb ライブラリを試して、画像のサイズを任意のサイズに変更することもできます。
ここで timthumb ライブラリ コードを確認してください。
WordPressでは、image_resize関数を使用するだけです
image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );
ファイル、コンテナの幅、コンテナの高さ、およびfalseを設定する場所(トリミングではなくサイズ変更する場合)。その他はオプションであり、新しいファイルの宛先、名前、または品質に特別なニーズがある場合は、それらを入力する必要があります。すべてを正しく入力した場合、関数は新しくサイズ変更された画像へのパスを返す必要があります。
WordPress では、写真をアップロードするときに実際にこれを自動的に行うことができるので、後でサイズ変更済みの写真を取得するだけであることに注意してください - add_image_size関数を見てください。