実現したいこと
LP制作にあたり、
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れるため修正したい
発生している問題・分からないこと
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れている
該当のソースコード
sass
1&-introduce { 2 position: relative; 3 width: 100vw; 4 margin: 0 auto; 5 padding-top: 49%; 6 background: url("img/mv_bg_pc.png"); 7 background-repeat: no-repeat; 8 background-position: center center; 9 background-size: cover; 10 @include mobile { 11 background: url("img/mv_bg_sp.png"); 12 padding-top: 121%; 13}
HTML
1<section class="p-content-introduce"> 2<div class="p-content-introduce__wrapper u-center"> 3 <div class="p-content-introduce__inner"> 4 <div class="p-content-introduce__left"> 5 <p class="p-content-introduce__text">個人事業主のための<br>お得な健康保険料削減サービス</p> 6 <picture> 7 <source media="(max-width: 750px)" srcset="img/mv_logo_sp.png"> 8 <img class="p-content-introduce__bgImg" src="img/mv_logo_pc.png" alt="セクション1の画像"> 9 </picture> 10 <div class="p-content-introduce__imgBox"> 11 <div class="p-content-introduce__imgBoxInner"> 12 <picture> 13 <source media="(max-width: 750px)" srcset="img/mv_icon_sp.png"> 14 <img class="p-content-introduce__logoImg" src="img/mv_icon_pc.png" alt="セクション1の画像"> 15 </picture> 16 <picture> 17 <source media="(max-width: 750px)" srcset="img/mv_icon_text_sp.png"> 18 <img class="p-content-introduce__logoImg" src="img/mv_icon_text_pc.png" alt="セクション1の画像"> 19 </picture> 20 </div> 21 </div> 22 </div> 23 <div class="p-content-introduce__right"> 24 <picture> 25 <source media="(max-width: 750px)" srcset="img/mv_img_sp.png"> 26 <img class="p-content-introduce__logoImg" src="img/mv_img_pc.png" alt="セクション1の画像"> 27 </picture> 28 </div> 29 </div> 30 <a href="#" class="p-content-introduce__link"> 31 <picture> 32 <source media="(max-width: 750px)" srcset="img/mv_XXXX_btn_sp.png"> 33 <img class="p-content-introduce__btn" src="img/mv_XXXX_btn_pc.png" alt="セクション1の画像"> 34 </picture> 35 </a> 36</div> 37</section>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
可変した際、背景が縮む際に画像の挙動がおかしい
補足
自分で試したことは以下になります。
・padding-topで画像の(高さ / 横幅) * 100を設定
・画像を、imgタグを用いてHTMLに直接設定
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/05/05 07:58
2024/05/05 08:47
2024/05/05 09:30 編集
2024/05/06 14:51