web-dev-qa-db-ja.com

Srcset属性を使用して画像サイズを設定しても反応画像を作成するにはどうすればよいですか？

私は私のテーマの中でサムネイルサイズを作成するためにこの機能を持っています。

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists('add_image_size')){
                    add_image_size( 'compare-shop-logo', 150 );
                    add_image_size( 'compare-single-product-2', 250, 188, true );
                    add_image_size( 'compare-slider-image', 848, 487, true );
                    add_image_size( 'compare-offer-box', 400, 300, true);
                    add_image_size( 'compare-blog-box', 400, 225, true );
                    add_image_size( 'compare-quote-box', 408, 437, true );
            }

オファーボックスのサイズを変更すると、imgタグのsrcsetとサイズが失われるのはどうしてですか。プロポーションを維持しながらサイズを変更する方法はありますか？

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">

ありがとう

theme-developmentimagesimage-sizeadd-image-sizeresponsive
5
Sam Provides

Srcset属性は、同じ縦横比の画像から構成されています。それらのいくつかを作成すれば大丈夫でしょう。

add_image_size( 'compare-offer-box', 400, 300, true);
add_image_size( 'compare-offer-box-2', 800, 600, true);
add_image_size( 'compare-offer-box-3', 1200, 900, true);

例えば。 4番目のブール値の引数は、WPに正確な比率にトリミングするように指示します。

トリミングせずにサイズを変更するには、次のようにします。

add_image_size( 'compare-offer-box', 400, 9999, false);
add_image_size( 'compare-offer-box-2', 800, 9999, false);
add_image_size( 'compare-offer-box-3', 1200, 9999, false);

これはあなたが特定の幅の画像が欲しいと仮定し、そしてプロポーションが要求するどんな高さでもそうします。制約のないディメンションに0またはnullの値を使用するWeb上のコードがいくつかありますが、WPソースコード内のコメントには「予測不可能な結果が生じる可能性がある」と警告されています。

高さを制限しながら比例して拡大縮小したい場合は、幅に大きな値を使用してください。

add_image_size( 'compare-offer-box', 9999, 400, false);
add_image_size( 'compare-offer-box-2', 9999, 800, false);
add_image_size( 'compare-offer-box-3', 9999, 1200, false);

縦横比を維持しながら特定のスペースに収まるように画像を拡大縮小する場合（400 x 400 xなど）、最大幅と高さの両方を指定できますが、トリミングはfalseに設定できます。

add_image_size( 'compare-offer-box', 400, 400, false);

高さによる制約がある場合は、sizes属性も調整することをお勧めします。デフォルトでは、指定された画像サイズの幅の最大値を持つビューポートの幅になります。

忘れずに既存の画像の画像サイズを再生成する必要があります。これをうまく行うプラグインがあります：プラグインリポジトリで再生サムネイルを検索してください。

9
Andy Macaulay-Brook