Q&A
普通に書けばそうなると思いますので、問題が把握できませんでした。
ですので、うまくいっていないコードをご提示いただけますか？
（質問修正しました）
画像がスマホサイズだった場合、その画像はきっちりになって、タイトル部、pタグ部の分下がり、全体はｽｸﾛｰﾙしないと見れない。求めているのは、画像サイズが縦長だった場合でも、タイトル、画像（フル）、pタグ部が表示されることです。縦長画像は縮小しなければならないですので左右に余白が出来ても良い。これを端末画面サイズが違えど適合させるには？
html
1<title>題名固定</title> 2 3<body> 4<div>タイトル</div> 5<img src="test_img.PNG"></img> 6<p>画像がスマホサイズだった場合、その画像はきっちりになって、divタグのタイトルの分下に下がり、このpタグの文字が下にｽｸﾛｰﾙしないと表示出来ない。<br>求めているのは、画像サイズが縦長だった場合でも、タイトル、画像（フル）、pタグ部が表示されること。画像が縦長なので全表示した場合、余白が出来ても良い。これを端末画面サイズが違えど適合させるには？</div></p> 7</body> 8
放置しすぎてしまいました。申し訳ありません。css部分は何も書いてありません。スマホでｽｸﾛｰﾙを無くしたいのですが、思い通りにいかないので。。。解り辛くすいません
回答1件
0
ベストアンサー
画像は全体を表示させたいです。
つまり縦長だろうと横長だろうと画像サイズが大きかろうと
余白が出来ても構わないので全体を表示させたいのです。
こういうことでしょうか？
css
1img{ 2 width: 100%; 3}
質問の変更に合わせて追記
css
1 * { 2 margin: 0; 3 } 4 5 body { 6 height: 100vh; 7 display: flex; 8 flex-direction: column; 9 } 10 11 img { 12 height: 100%; 13 object-fit: contain; 14 }
投稿2021/11/09 05:36
編集2021/12/25 02:38総合スコア36960
放置しすぎてしまいました。申し訳ありません。また、質問が解り辛かった様で修正しました。cssは何も書いてません。width:100％の場合、画像が横サイズで合ってしまうためｽｸﾛｰﾙが必要となります。画面サイズがどうであれ、ｽｸﾛｰﾙを無くしたいのと、画像下にあるpタグ部も表示させたい。つまり、全画面固定といえば解り易いでしょうか？
こちらのCSSが理想の形です。有難う御座います。今から頂いたｃｓｓをより深く理解したいと思います。有難うございました。
あなたの回答
tips
プレビュー
