Q&Ahttps://www.try110.com/bousai_kawara/
こちらのサイトの模写コーディングを行っています。
画像をレスポンシブに表示させたいです。
【見本gif】
メインビジュアルを上記のような動きにしたいです。
【模写gif】
【HTML】
<body> <div class="wrapper"> <header> <h1> <a href="#" class="logo"><img src="logo.png" alt="株式会社鶴弥"></a> </h1> </header> <div class="mainBlock"> <div class="mainImg"> <p> <img src="mainImg-pc.png" alt="ちょっと待った！「瓦屋根は地震に弱い･･･」その報道は間違っています!!"> </p> </div>
【CSS】
.mainImg img{ max-width: 100%; width:100%; height: auto; }
【試したこと】
・上記のCSSコード。
見本のソースコードを見ても、CSSは上記のCSSと同じでしたが、
結果が同じなりませんでした。
解決策をご教示頂けますと幸いです。
回答1件
0
自己解決
親に当たるブロックの幅に、
絶対値を指定していたのが原因でした。
親ブロックの幅自体をレスポンシブにすることで解決しました。
投稿2020/06/27 21:49
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。