模写コーディングに取り組んでいます。
レスポンシブサイトを作成しているのですが、
画像にobject-fit: coverを指定しているのに反映されていない気がします。
画面を小さくしても画像だけ表示が変わらないままです。
詳しい方いらっしゃいましたら教えてください、よろしくお願いいたします。
(index.html) <div class="main-visual"> <img src="img/mainvisual-pc.jpg" alt="メイン画像" class="m-img"> </div> (style.css) .m-img { width: 100%; object-fit: cover; height: 420px; margin-bottom: 90px; } (responsive.css) @media (max-width: 600px) { .m-img { max-width: 100%; }
(index.html) <div id="mainvisual"> <picture> <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg"> <img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト"> </picture> </div> (style.css) #mainvisual img { width: 100%; max-width: 1920px; height: 420px; object-fit: cover; } (responsive.css) 記載は特にありませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。