![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
プログラミングの勉強を始めたばかりの初心者です。
HTML・CSSが一通り終了し模写コーディングに取り掛かりました。
そこで行き詰っています。
ネット上にある初心者用の模写コーディングなのですが、
ダウンロードした画像(1920×420)を取り込むとPC幅に収まりきらずに大きくはみ出ます。
検証でみて勿論そうなのですが、印刷プレビューだと収まっています。
そこも疑問なのですが、やはり実際収まり切れないのは事実でどうしたらよいのか
ネットなど調べますがやはりうまくいきません。
私のPCは15.6型のものです。画面内に画像を収めるためにはどうしたらよいのでしょうか。
まだよく理解できていないことが多い状況です。
よろしくお願いします。
![「模写コーディング PC画面幅に画像を合わ」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/4/543134998_61c3ba01ceffc/M.png)
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で質問しましょう!
似たような質問が見つかりました
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- ドライブ・ストレージ PCのパーフォーマンスが極端に落ちた。 8 2023/01/28 15:22
- Google Drive Google Photo 5 2022/03/23 09:39
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- PDF 画像調整してスクショし保存した画像を印刷する方法 1 2022/03/31 18:42
- その他(法律) 食べ物の写真でイラスト作成した場合の著作権 pixivで例えばマクドナルドやスターバックスと検索する 2 2022/05/08 19:25
- マンガ・コミック 手塚治虫「ブラックジャック」の最終話「人生という名のSL」の収蔵巻は? 1 2023/07/15 12:32
- フィルムカメラ・インスタントカメラ 自販機の電光を撮影するとルーレット状に 3 2022/12/22 14:29
- 日本語 収蔵作品の画像貸出・取材 2 2023/04/04 15:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
サイトにコンテンツを並べる際...
-
アコーディオンメニューが思う...
-
Duolingo のソースコードの名前...
-
CSSが効かずどのように指定すれ...
-
<meta charset="utf-8"><!-- 文...
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
Affinger6でトップページに記事...
-
WEBページを強制的に横画面で見...
-
ホームページをちょっと加工す...
-
goo は、放置?
-
HTMLの CSSのファイルというの...
-
URLにアクセスした際に指定した...
-
HTML電卓で1文字消す方法
-
別サイトのHTML内にある情報を...
-
スマホでHTMLファイルを開いて...
-
htmlで、文字に線を囲むには何...
-
、URL化させるにはどうしたらい...
-
HTMLですCSSです この画像のよ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プログラミング
-
Progateの入力画面で使えるショ...
-
C言語のプログラミングについて...
-
linuxでソースから定義を探すには
-
無職になって2ヶ月目です。WEB...
-
y=X³-2x²-3の解を求めるプロ...
-
プログラミングって独学じゃ無...
-
模写コーディング PC画面幅に画...
-
EXCELVBAスタンダードとACCESSV...
-
Visual C++ と Visual C++ E...
-
十進ベーシックを使ってgcd(n,c...
-
VBA、Excelマクロの勉強法について
-
十進ベーシックまたはマキシマ...
-
初歩の十進ベーシック
-
プログラミングは独学で学べる...
-
フリーのテキストエディタ
-
(再質問)エクセルのマクロボ...
-
collection型を引数にしたファ...
-
新しいパソコンのネット設定な...
-
汎用機のJCLの入門書ありま...
おすすめ情報