Q&A
「ヘッダー画像」とは assets/img/header.png のことでいいですか？
前提・実現したいこと
横幅いっぱいではなく、一部の横幅だけ
ヘッダー画像を固定したサイトを作りたいと思っています。
ヘッダー固定はできたのですが、ウィンドウ幅を変更すると画像がはみだしてしまいます。
解説方法を教えていただけると助かります。
該当のソースコード
HTML
1<body class="body"> 2 <div id="bg"> 3 <div class="container"> 4 <div class="inner"> 5 <!-- ========== HEADER ========== --> 6 <header id="header"> 7 <div class="header_inner"> 8 <img src="assets/img/header.png"> 9 </div> 10 </header> 11 </div> 12 <!-- ========== MAIN ========== --> 13 <main id="main"> 14 <div class="kv"> 15 <img src="assets/img/kv.png"> 16 </div> 17 <div class="main_contents"> 18 <img src="assets/img/title.png"> 19 </div> 20 </main> 21 </div> 22 </div> 23</body>
CSS
1.body { 2 max-width: 800px; 3 margin: 0 auto; 4 background-color: #FFD200; 5} 6 7/* background */ 8#bg{ 9 background-image: url(../img/bg.png); 10 background-size:100%; 11 background-repeat: repeat-y; 12} 13 14.container{ 15 width: 90%; 16 margin: 0 auto; 17} 18 19.inner{ 20 position: relative; 21 max-width: 660px; 22 width: 100%; 23 margin: 0 auto; 24} 25 26/* header */ 27 28#header { 29 position: fixed; 30 top: 0; 31}
試したこと
ヘッダーの画像や要素にwidth、max-widthを設定しても画像の横幅のままはみ出してしまいます。
また、「ヘッダーの画像や要素にwidth、max-widthを設定しても画像の横幅のままはみ出してしまいます」とのことですが、その状態のコードをご提示いただけますか？
ヘッダー画像は assets/img/header.png としています。
.header_inner{width: 100%; max-width: 100%;}
.header_inner img{width: 100%; max-width: 100%;}
などを試してみましたが画像がはみ出したままでした。
回答1件
0
こういうことでしょうか？
css
1.header_inner img { 2 width: 100%; 3 max-width: 660px; 4}
投稿2021/12/27 02:52
総合スコア36981
ご回答ありがとうございます。
上記コードを試してみたのですが、
下記画像のように右側がはみ出してしまいました。
画像のwidthの%値を変更してみてもブラウザ幅を広げると幅が短くなってしまいます。
https://d.kuku.lu/94a4625a8
問題が再現しませんでした。
ご提示いただいている部分に原因はなさそうです。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないのだろうと思います。
問題を再現する手順をもう少し詳しくご提示いただけますか？
ありがとうございます。
こちらで再度検証してみます。
あなたの回答
tips
プレビュー
