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

A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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>
No.1
- 回答日時:
ソースも何も無いので、想像でしか判断できませんが、
原因は2つありそうだけど、その内のどちらかかな?
(レア的に他の原因だってありえますけどね)
1,
bodyやdiv要素に、特大のwidthが設定したある。
近年のレスポンシブウェブデザインでは、width:100%;が一般的です。
2,
その画像に、widrh="1920" が設定してある。
これもCSSで、width:100%;にすると良いでしょう。
---------------
F12の検証ツールを起動して、その画像に何のCSSが適用されているのか調べるのが簡単です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
iPhoneで HTMLファイルを閲覧
-
スマホ(android)のタッチパネ...
-
css初心者 フレックスボックス...
-
HTML&CSSとHTML5&CSS3の違い...
-
スマホで、左右にスワイプして...
-
このサイトのカテゴリのチェッ...
-
、URL化させるにはどうしたらい...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
-
WEBページを強制的に横画面で見...
-
HTML&CSS メディアクエリについ...
-
レイアウトが異なる別のワーク...
-
HTML入門でもう躓いてしまった。
-
すいません HTMLです この画像...
-
CSSが効かずどのように指定すれ...
-
Affinger6でトップページに記事...
-
<input>のstep属性に違反する入...
-
HTML/CSSを使って写真のような...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Progateの入力画面で使えるショ...
-
無職になって2ヶ月目です。WEB...
-
フリーのテキストエディタ
-
【プログラミングについて】 僕...
-
SQL言語で扱う文字コードを教え...
-
C言語のプログラミングについて...
-
模写コーディング PC画面幅に画...
-
エディタ
-
y=X³-2x²-3の解を求めるプロ...
-
C++についてです。私は大学でC+...
-
(再質問)エクセルのマクロボ...
-
iText セル内での自動改行について
-
collection型を引数にしたファ...
-
mとnを入力 mからnまでを加算し...
-
コンソール画面のクリアの方法
-
アコーディオンメニューにする...
-
汎用機のJCLの入門書ありま...
-
4ヶ月経ってもgoogleへインデッ...
-
検索枠に単語を入力すると、勝...
-
DreamweaverCS以降の書籍につい...
おすすめ情報