おしえて

模写コーディング PC画面幅に画像を合わせられない。

締切済

質問者：width
質問日時：2021/12/23 08:53
回答数：2件

プログラミングの勉強を始めたばかりの初心者です。
HTML・CSSが一通り終了し模写コーディングに取り掛かりました。
そこで行き詰っています。
ネット上にある初心者用の模写コーディングなのですが、
ダウンロードした画像（1920×420）を取り込むとPC幅に収まりきらずに大きくはみ出ます。
検証でみて勿論そうなのですが、印刷プレビューだと収まっています。
そこも疑問なのですが、やはり実際収まり切れないのは事実でどうしたらよいのか
ネットなど調べますがやはりうまくいきません。
私のPCは15.6型のものです。画面内に画像を収めるためにはどうしたらよいのでしょうか。
まだよく理解できていないことが多い状況です。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： gura_
回答日時：2021/12/25 12:09

width さん

･････画面内に画像を収めるためには･･･････

画像の width を100vw 等で指定すれば良い。

ご参考に↓
https://allabout.co.jp/gm/gc/400630/
https://allabout.co.jp/gm/gc/400630/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" >
</head>
<body>
<img src="https://oshiete.xgoo.jp/_/bucket/oshietegoo/imag … style="width:calc(100vw - 16px); height:700px; "><br>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： naokita
回答日時：2021/12/23 10:17

ソースも何も無いので、想像でしか判断できませんが、

原因は２つありそうだけど、その内のどちらかかな？
（レア的に他の原因だってありえますけどね）
１，
bodyやdiv要素に、特大のwidthが設定したある。
近年のレスポンシブウェブデザインでは、width:100%;が一般的です。
２，
その画像に、widrh="1920" が設定してある。
これもCSSで、width:100%;にすると良いでしょう。

---------------
F12の検証ツールを起動して、その画像に何のCSSが適用されているのか調べるのが簡単です。