web-dev-qa-db-ja.com

カスタム画像サイズ/サムネイル-ソース画像が設定されたサイズよりも小さい場合でも縦横比にトリミング

通常、ハードクロップを使用してカスタム画像サイズを設定する場合-例えばadd_image_size( 'custom-size', 400, 400, true );-次の結果が得られます。

  • ＃1アップロードした画像：600x500>サムネイル：400x400。
  • ＃2アップロードした画像：500x300>サムネイル：400x300。
  • ＃3アップロードされた画像：300x200>サムネイル：300x200。

しかし、私がしたいのは、アップロードした画像がカスタム画像サイズの設定された幅または高さ、あるいはその両方よりも小さい場合です。上記の例＃2と＃3-これらの寸法内に収まるように画像をトリミングする代わりに、次のようにアスペクト比（この場合は1：1）に一致するようにトリミングされます。

  • ＃1アップロードした画像：600x500>サムネイル：400x400。
  • ＃2アップロードされた画像：500x300>サムネイル：0x3。
  • ＃3アップロードされた画像：300x200>サムネイル：200x2。

これは標準のadd_image_sizeオプションを使用して可能であるとは思わないが、別の関数、またはadd_image_size関数を変更するフックを使用して可能ですか？

または、この機能を追加するプラグインはありますか？

どなたでもご提供いただける情報をいただければ幸いです。

imagescropping
11
Joey Joe Joe Junior Shabadoo

これは新しいCSSソリューションであり、 ユーザーのブラウザーの78.9％ でしか機能しないため、これは本当に良いソリューションではありませんが、それを克服できるいくつかのポリフィルがあります object-fit-画像 および fitie

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

理想的には、アップロード時に小さな画像が比例して拡大縮小された方が良いでしょうが、その解決策を見つけることができませんでした。

2
Bryan Willis

それはそのように機能しないだけです。

質問を逆に考えても問題ない場合は、選択した画像サイズとレスポンシブ画像を使用して、最新のブラウザで正しい結果を得ることができます。

このようなコードを使用する場合：

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をサポートしないブラウザーで良好なパフォーマンスが得られるように、レスポンシブ画像を微調整しながらこれを解決しました。

2
Andy Macaulay-Brook