通常、ハードクロップを使用してカスタム画像サイズを設定する場合-例えばadd_image_size( 'custom-size', 400, 400, true );
-次の結果が得られます。
しかし、私がしたいのは、アップロードした画像がカスタム画像サイズの設定された幅または高さ、あるいはその両方よりも小さい場合です。上記の例#2と#3-これらの寸法内に収まるように画像をトリミングする代わりに、次のようにアスペクト比(この場合は1:1)に一致するようにトリミングされます。
これは標準のadd_image_sizeオプションを使用して可能であるとは思わないが、別の関数、またはadd_image_size関数を変更するフックを使用して可能ですか?
または、この機能を追加するプラグインはありますか?
どなたでもご提供いただける情報をいただければ幸いです。
これは新しいCSSソリューションであり、 ユーザーのブラウザーの78.9% でしか機能しないため、これは本当に良いソリューションではありませんが、それを克服できるいくつかのポリフィルがあります object-fit-画像 および fitie
img {
display: block;
overflow: hidden;
width: 400px;
height: 400px;
-o-object-fit: cover;
object-fit: cover;
}
理想的には、アップロード時に小さな画像が比例して拡大縮小された方が良いでしょうが、その解決策を見つけることができませんでした。
それはそのように機能しないだけです。
質問を逆に考えても問題ない場合は、選択した画像サイズとレスポンシブ画像を使用して、最新のブラウザで正しい結果を得ることができます。
このようなコードを使用する場合:
add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );
...そしてあなたのテンプレートでは次のようなものです:
wp_get_attachment_image( $image_ID, 'custom-size-small' )
...デフォルトでは(WP 4.4以降)src
としてセットから最小のバージョンが含まれ、srcset
属性でサイズが大きいイメージタグが取得されます。最大の適切なバージョンから選択して表示します。
そのため、特定の画像に大きなバージョンがなくても問題ありません。 300x200
の画像には200x200
バージョンが作成され、そのバージョンがHTMLで唯一のバージョンとなり、すべてのブラウザで表示されます。
src
のみをサポートし、srcset
をサポートしないブラウザーで良好なパフォーマンスが得られるように、レスポンシブ画像を微調整しながらこれを解決しました。