###前提・実現したいこと
既存のHTMLサイトをレスポンシブ対応化しているのですが、
画像サイズが変わりません。
以下に貼付けますが、どのような問題点があると想定できるでしょうか。
当方、まだコーダーとして初心者であるため、
疑問点などありましたら迅速に回答致しますので、
どうぞよろしくお願いいたします。
###該当のソースコード
<div class="top"> <img src="img/imagebanner.png" width="1178" height="390" alt=""/> </div> <div class="digicatalog"> <img src="img/dicatalogbtn.png" width="334" height="70" alt=""/> </div> </header>
@charset "UTF-8"; /* CSS Document */ /* pc */ @media screen and (min-width: 961px) { ul, li { list-style: none; } h2{ margin-top: 80px; } img { max-width : 100% ; height : auto ; } body { -webkit-text-size-adjust : 100% ; } .header { width: 80%; margin: 0 auto; width: 1181px; } .top { position:relative; width: 1181px; top: 0; } .digicatalog { position: absolute; width: 1181px; top: 255px; left: 820px; } /* tablet */ @media only screen and (min-width: 641px) and (max-width: 960px) { ul, li { list-style: none; } h2{ margin-top: 80px; } img { max-width : 100% ; height : auto ; } body { -webkit-text-size-adjust : 100% ; } .header { width: 80%; margin: 0 auto; width: 1181px; } .top { position:relative; width: 1181px; top: 0; } .digicatalog { position: absolute; width: 1181px; top: 255px; left: 820px; } /* smartPhone */ @media screen and (max-width: 640px) { ul, li { list-style: none; } h2{ margin-top: 80px; } img { max-width : 100% ; height : auto ; } body { -webkit-text-size-adjust : 100% ; } .header { width: 80%; margin: 0 auto; width: 1181px; } .top { position:relative; width: 1181px; top: 0; } .digicatalog { position: absolute; width: 1181px; top: 255px; left: 820px; }
コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、HTMLも最低限追記ください。
回答2件
あなたの回答
tips
プレビュー