###レスポンシブ対応
@mediaクエリを使ってレスポンシブルデザインを作成したい
###発生している問題・エラーメッセージ
画像が可変となりません。
imgに対してwidth:100% height:auto;としていますがかかりません。
###該当のソースコード
■html <main> <div class="mainPhoto"> <img src="img/main.jpg" width="960" height="457" alt=""/> </div> <section class="conA"> <div class="container"> <ul> <li> <p>Menu</p> <a href=""><img src="img/menu-bnr.jpg" alt="menu" width="310" height="145"></a> </li> <li> <p>Salon info</p> <a href=""><img src="img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a> </li> <li> <p>Access</p> <a href=""><img src="img/access-bnr.jpg" alt="access" width="310" height="145"></a> </li> </ul> </div> </section> <section class="conB"> <div class="container"> </div> </section> </main>
■style.css main{ width: 960px; padding-top:150px; padding-bottom: 50px; margin: 0 auto; } main .mainPhoto{ display: block; margin: 0 auto; width: 100%; height: auto; max-width: 960px; } .conA ul { display: flex; justify-content: space-around; } .conA li { display:block; } .conA p { font-family: 'Handlee', cursive; } @media only screen and (max-width:480px){ body{ margin:0 auto; width: 95%; } .conA .container { width: auto; } .conA ul li { flex:1 1 95%; margin:0 auto; } .conA li { width: 100%; height: 100%; } .mainPhoto img { max-width: 100%; width: 100%; height: auto; }
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー