質問: WordPressのレスポンシブブログのカスタマイズで サムネイル画像を縦横比を保ったままで目いっぱい表示したく、 質問させていただきました。 ブログトップで新着投稿3件を大きいサムネイルの上に タイトル文字、カテゴリ等を被せた状態ででスライダー表示(bxsliderを使用)、 その下に新着投稿4件目から小さいサムネイルで横にタイトル、カテゴリ等を表示しています。 このサムネイル画像はadd_image_size('〇〇','855','550',true);で設定しているのですが、 元の画像がこれより小さい場合は(縦幅が550に満たない)ブラウザ幅を縮めていった時に、 下部に隙間ができてスライダーの高さが統一されません。 縦横比を保ったままで目いっぱい表示したいです。(はみ出ても構いません) 何か方法はありますでしょうか。 説明がわかりずらいかもしれませんが、ご教授いただければ幸いです。 ■試したこと ------ add_image_size('〇〇','855','550',true);の数値を変更しましたが PC版のスライダー部分が855×450固定なので小さい画像に合わせると スライダーの大きさ自体が変わってしまいました。
回答: > > このサムネイル画像はadd_image_size('〇〇','855','550',true);で設定している > > > 〇〇 だと説明が大変ですので、仮に teratail57350 としましょう。 実際に、ブラウザで表示した時に、本当に teratail57350 のサイズを引っ張ってきていますか? add_image_size() を途中で追加した場合、追加後にアップロードした画像はそのサイズの画像を生成しますが、以前にアップロードした画像は新しいサイズで生成はしません。プラグインなどを使って、再度生成してあげる必要があります。 また、wp_get_attachment_image() 関数や the_post_thumbnail() 関数などで指定したサイズが無い場合、(確か)指定に近いサイズを引っ張ってきた記憶です。wp_get_attachment_image() 関数も the_post_thumbnail() 関数も内部的には wp_get_attachment_image_src() 関数が最終的に使われることになるのですが、wp_get_attachment_image_src() の内部で、画像を呼び出す時、image_downsize() 関数が使われています。 あともう一つ、add_image_size() 関数で指定したサイズよりも小さい画像をアップロードし、そのサイズを呼び出そうとした場合、アップロードした画像のフルサイズを呼び出されることになります。つまり、WordPress は縮小画像は作成するが、拡大画像は作成しません。 もし、ブラウザで確認した時に、意図したサイズの画像を引っ張ってきている!という場合、WordPress は関係ないです。kei344 さんが指摘している通り、HTML / CSS / JavaScript が原因です。