Wordpressのブログにアップする画像のサイズを、レスポンシブに対応しつつ各サイズで出力したい

Question

前提・実現したいこと

現在wordpressでサイトを構築しているのですが、ブログ部分で画像アップする際、wordpressの画像サイズ（中・大・フルサイズなど）を反映して出力しつつ、レスポンシブにも対応させたいです。

発生している問題・エラーメッセージ

ブログ投稿画面から画像をアップすると縦に伸びて表示される問題が出たので、下記ページを参考に出力されたimgタグからwidthとheightを消すように処理しました。

https://hebochans.com/delete-width-height-class/

しかしそうするとどのサイズも要素いっぱい（100%）のサイズで表示されてしまいます。

先方的には小さい画像を載せたい場合もあるらしいので、どうにか各サイズで出力しつつレスポンシブにも対応させたいです。

よろしくお願い致します。

補足情報

imgタグにはcssで100%を指定しています。

Answer 1

imgタグにはcssで100%を指定しています。

width: 100% という意味なら max-width: 100% に直して試してみてください。

備考：

• width, height を削除するのは、SEO的に良くないと思います。(Core Web Vitals CLS でググってみてください)
• 投稿画面から画像を挿入すると srcset で、閲覧時のディスプレイに適したサイズの画像をレスポンシブに出し分けてくれる img タグを生成してくれますが、思うようにコントロールするのはなかなか難しいです。

Comments

[saku615]

ご回答いただきありがとうございます。
heightを入れたままにすると画面が縮んだときに縦に伸びてしまうのですが、解決方法はないということでしょうか？