wordpressのadd_image_sizeで画像をトリミングしたいのに、できる画像とできない画像がある

前提・実現したいこと

wordpressの記事一覧表示ページのindex.phpにて、投稿したアイキャッチ画像をadd_image_sizeにて指定した大きさにトリミングして表示したい。

発生している問題

現在、wordpressにてブログのテーマを作成しています。
その、記事一覧ページをindex.phpにて作成しました。
記事投稿の際に、アイキャッチ画像を設定して投稿すると、index.phpで表示されるページにて、その画像が表示されるところまでは作ることができました。
そこで、画像をそれぞれの投稿ごとのカード内に収めたり、小さい場合は引き伸ばしたいと思い、画像のサイズを設定するために、functions.phpにて

PHP
1add_image_size('index-thumb', 9999, 300, true);

を追加したのですが、下記画像の通り、画像によって広がりすぎたり、拡大されなかったりとうまくいきません。

画像に関しては、**高さ300px、幅100%**で指定したいと思っています。

幅100%で指定する方法はないかと調べましたが、add_image_sizeはpxしか引数で指定することができないっぽく、大きいpx数を指定することで実質的に幅100%を実現するしか無いようでした。

該当のソースコード

以下にindex.phpの画像表示部分のコードを記載します。

PHP
1<div class="thumbnail" itemprop="image" itemscope itemtype='http://schema.org/ImageObject' width="100%" height="300px">
2  <?php the_post_thumbnail('index-thumb'); ?>
3</div>

PHP
1//style.css
2.imgClass{
3    width: 100px;
4    height: 300px;
5    object-fit: cover;
6}

試したこと

上記の画像の2つの投稿では幅が広がりすぎてるものと、画像が小さいものがありますが、それらの高さはどちらもしっかりと300pxで指定した通りでした。
画像のサイズ自体の問題かと思い、大きめのサイズの画像を投稿してみても、幅いっぱいにならなかったりと、画像のサイズ自体の問題では無いようでした

ぜひ解決策を教えていただきたいです。
宜しくお願いいたします。

追記

皆様の回答により、CSSにて画像を調節すれば良いと言うことがわかりました。

しかし、the_post_thmbneilにて画像を出力している関係で、imgタグに対するスタイルを、そのままCSSに記載してもだめかと思い、調べてみたところ、出力されるimgタグに対してclassを付与できるphpがあったので、実際にimgタグに対してclassを付与してみました。
その上で、そのclassに対してスタイルを与えたのですが、結果変わらずでした。

chroomeのデベロッパーツールでimgタグをクリックして出てくるスタイルに、widthやobjectfitを記載してみたところ、思い通りになりました。
ただ、wordpressファイルにてうまくいきません。。

Lhankor_Mhy

2020/07/31 09:13

img要素のスタイルは特別つけていないのですか？

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

回答2件

ベストアンサー

add_image_sizeは画像投稿時に特定のサイズに切り取るために使用されます。なので、表示のときに使うものでは有りません。（今回追加したものは極端な画像サイズになるので使用しないほうが良いように思います）

特定の箇所で幅100%にしたい、などはCSSで調節しましょう。テーマによって構成が違うので、具体的なCSSの提示は難しいのですが、object-fitなどを使うとうまくできるかもしれません。

CSS
1div.thumbnail > img {
2  width: 100%;
3  height: 300px;
4  object-fit: cover;
5} /* 例（お使いのテーマの指定などによっては効かない可能性もあります） */

【object-fit - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

【1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

投稿2020/07/31 09:05

kei344

総合スコア69407

kobaryo04ysh

2020/07/31 10:23

回答ありがとうございます！ CSSを適用することで、画像を切り取ろうとしたのですが、そもそもthe_post_thmbneailにて画像を出力しているからか、全く変わりませんでした。デベロッパーツールでimgタグに、ご回答いただいた通りのCSSを指定したらうまく行ったのですが、PHPファイルにimgタグが無い場合、どうしたら良いのでしょうか？

kei344

2020/07/31 13:23

WordPressはサーバ上で実行された後、ブラウザにHTMLを送ります。「PHPファイルにimgタグが無い場合」は関数などで出力しているだけなので、出力されたHTML（ブラウザで「ページのソースを表示」）を確認してください。ブラウザに画像が表示されていれば、おおかたimgタグもそこにあるので、あとはCSSの問題です。

kobaryo04ysh

2020/08/01 03:02

出力されたimgタグを記載します。 <img width="400" height="300" src="#画像url" class="imgClass" /> imgタグをみる限り、width、heightが特に設定などをした記憶が無いのですが、勝手に指定されてしまっていて、imgタグのclass(imgClass)にCSSをかけても画像の大きさが変わらないのですが、これは何故だかわかりますか？

kei344

2020/08/01 03:07

「CSSをかけても」のやり方に問題があるとか、編集後にキャッシュが残っているとかは想定できます。

kobaryo04ysh

2020/08/01 03:39

ありがとうございます！できました！キャッシュの削除を行ったら無事、CSSが反映されました。キャッシュについてもう少し調べて今後このようなエラーが起こらないようなコードを書こうと思います。

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