前提・実現したいこと
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ファイルにてうまくいきません。。
回答2件
あなたの回答
tips
プレビュー