850px四方の画像AとBがあります。それぞれ別のページに設定しています。
Aの画像は、上下にある文章(<p>~</p>のことです…語彙力なくてすみません)の幅とぴったりです。
しかしBの画像は、文章の幅の半分くらいの幅しかなく、見た感じは400px四方ではないかという具合です。
こちら考えられる原因としては、コーディングの問題でしょうか?
例えば、widthを100%に設定しているか、何pxで設定しているか、max-widthは設定されているか…などでしょうか。
今日仕事で、サイト担当部署の方から、Bの画像が小さく表示されるから画像をもう一度見直すようにと言われました。
が、サイズは間違いなくAと同じです。
ページの構成は一緒で、それぞれのページで使う商品画像と説明文が違うくらいです。
そのため、画像に原因があるとは思えないんです。
私よりもずっとサイト制作に詳しい部署の方のコーディングを疑うわけではないのですが、新商品のため新たにページを作ってもらう中で、うっかりコードをいじってしまった…ということも、もしかしたらあるかもなと思いました。
明日、開発者画面などで調べるつもりですが、どう思いますか?
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
画像に、width="400" などの小さい指定が無い前提として、
試す方法は色々あるので、A/B双方の画像の配置を変えてみても良いのですが、
例えば、
Bの画像の場所に、Aの画像を入れてみましょう!(1分で設置できて確認もできます)
おそらく、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さん仰っていただいたように画像を差し換えてみようと思います!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Amazon Amazonの商品画像に詳しい方に質問があります。 1 2022/09/14 12:18
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- ヤフオク! デスクトップPCをヤフオクやメルカリに出品している人 1 2022/12/05 07:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
LightBoxの矢印の出し方
-
画像とその下にあるテキストの...
-
WEB上でディレクトリ内の画像を...
-
CSSで画像を均等配置
-
CSSだけでサムネイルから拡大画...
-
画像をリンクボタンにして文字...
-
background-sizeの背景で最小値...
-
画像の中にインラインフレーム...
-
Googleマップの埋め込みで上部...
-
背景画像を前面に表示させる方法
-
widthが可変のブロック要素で、...
-
画面サイズに合わせて背景の写...
-
background-sizeでcontainする...
-
自分で壁紙を作成して、ホーム...
-
数か月ぶりにCSSを再開しました...
-
イメージ(gif)の影
-
横幅100%指定でも崩れないボッ...
-
[HTML][CSS] 画像の高さを揃え...
-
jQueryでCSSの背景画像を切り替...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報