【Webサイト】画像が小さく表示されてしまう理由はなぜでしょうか

850px四方の画像AとBがあります。それぞれ別のページに設定しています。

Aの画像は、上下にある文章(<p>~</p>のことです…語彙力なくてすみません）の幅とぴったりです。
しかしBの画像は、文章の幅の半分くらいの幅しかなく、見た感じは400px四方ではないかという具合です。

こちら考えられる原因としては、コーディングの問題でしょうか？
例えば、widthを100%に設定しているか、何pxで設定しているか、max-widthは設定されているか…などでしょうか。

今日仕事で、サイト担当部署の方から、Bの画像が小さく表示されるから画像をもう一度見直すようにと言われました。
が、サイズは間違いなくAと同じです。
ページの構成は一緒で、それぞれのページで使う商品画像と説明文が違うくらいです。
そのため、画像に原因があるとは思えないんです。

私よりもずっとサイト制作に詳しい部署の方のコーディングを疑うわけではないのですが、新商品のため新たにページを作ってもらう中で、うっかりコードをいじってしまった…ということも、もしかしたらあるかもなと思いました。
明日、開発者画面などで調べるつもりですが、どう思いますか？

No.1 回答者： naokita 回答日時： 2021/12/17 03:07

画像に、width="400" などの小さい指定が無い前提として、

試す方法は色々あるので、A/B双方の画像の配置を変えてみても良いのですが、
例えば、
Bの画像の場所に、Aの画像を入れてみましょう！（１分で設置できて確認もできます）
おそらく、Aの画像も小さくなるとは思います。
だとすると、
BのページのCSSが関係している・・・
そのCSSを変更すれば、Bの画像も大きく表示されるでしょう。

そのCSSがわからないのであれば、
Bの画像に直接CSSのstyleを書くと、とりあえずの対処方法になります。

<img src="～～～.jpg" style="width:850px;" alt="Bの画像">
または、適当な％で表示（レスポンシブ用として）
<img src="～～～.jpg" style="max-width:850px; width:99%;" alt="Bの画像">

------------
＞明日、開発者画面などで調べるつもりですが、
A,
そうですね、F12で「CSS」と「レイアウトのボックスサイズ」を調べると一発でわかります。
原因は色々考えられるので、何ともいえません・・・

この回答へのお礼

naokitaさん、わかりやすいアドバイスをいただきありがとうございます！
お返事遅くなりすみません。この週末バタバタしたりさぼったり、今ようやくPCを開き検証を始めました。

それぞれの画像を変えて検証、なるほどですね！！
手っ取り早いし簡単な方法ですね。
結論から申し上げますと、この方法で検証する必要がありそうです。やはりコードに原因がある気がしています。

先にF12でCSSとレイアウトのボックスサイズを見てみました。
見た感じ、コードは一緒です。ただ、うまく反映されない画像の幅が、400になっていました。
そのため、やはりコーディングの検証が必要だと思います。

こちらのコードを書いたのは私ではない誰かなので、正直うまく再現できるかわかりませんが・・、開発者画面をコピペし、naokitaさん仰っていただいたように画像を差し換えてみようと思います！！

お礼日時：2021/12/19 21:13