WordPressでサムネイル画像を縦横比を保ったままで目いっぱい表示したいです。

WordPressのレスポンシブブログのカスタマイズで
サムネイル画像を縦横比を保ったままで目いっぱい表示したく、
質問させていただきました。

ブログトップで新着投稿３件を大きいサムネイルの上に
タイトル文字、カテゴリ等を被せた状態ででスライダー表示(bxsliderを使用)、
その下に新着投稿４件目から小さいサムネイルで横にタイトル、カテゴリ等を表示しています。

このサムネイル画像はadd_image_size('〇〇','855','550',true);で設定しているのですが、
元の画像がこれより小さい場合は（縦幅が550に満たない）ブラウザ幅を縮めていった時に、
下部に隙間ができてスライダーの高さが統一されません。
縦横比を保ったままで目いっぱい表示したいです。（はみ出ても構いません）
何か方法はありますでしょうか。

説明がわかりずらいかもしれませんが、ご教授いただければ幸いです。

■試したこと

add_image_size('〇〇','855','550',true);の数値を変更しましたが
PC版のスライダー部分が855×450固定なので小さい画像に合わせると
スライダーの大きさ自体が変わってしまいました。

kei344

2016/12/02 02:31

WordPress ではなく JavaScript / CSS の問題ではないでしょうか。状況が再現するHTML/CSS/JavaScriptを追記されてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

このサムネイル画像は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 が原因です。

投稿2016/12/02 03:49

退会済みユーザー

総合スコア0