せめてweb上で動作するplayground 等用意してみてはいかがでしょうか？（調査する為に画像を用意させるのは結構なコストです。
Like!
LP制作にあたりレスポンシブ対応がうまくいってないため意見をいただきたいです
解決したいこと
LP制作にあたり、
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れるため修正したい
該当するソースコード
・sass
&-introduce {
position: relative;
width: 100vw;
margin: 0 auto;
padding-top: 49%;
background: url("img/mv_bg_pc.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include mobile {
background: url("img/mv_bg_sp.png");
padding-top: 121%;
}
・HTML
<section class="p-content-introduce">
<div class="p-content-introduce__wrapper u-center">
<div class="p-content-introduce__inner">
<div class="p-content-introduce__left">
<p class="p-content-introduce__text">個人事業主のための<br>お得な健康保険料削減サービス</p>
<picture>
<source media="(max-width: 750px)" srcset="img/mv_logo_sp.png">
<img class="p-content-introduce__bgImg" src="img/mv_logo_pc.png" alt="セクション1の画像">
</picture>
<div class="p-content-introduce__imgBox">
<div class="p-content-introduce__imgBoxInner">
<picture>
<source media="(max-width: 750px)" srcset="img/mv_icon_sp.png">
<img class="p-content-introduce__logoImg" src="img/mv_icon_pc.png" alt="セクション1の画像">
</picture>
<picture>
<source media="(max-width: 750px)" srcset="img/mv_icon_text_sp.png">
<img class="p-content-introduce__logoImg" src="img/mv_icon_text_pc.png" alt="セクション1の画像">
</picture>
</div>
</div>
</div>
<div class="p-content-introduce__right">
<picture>
<source media="(max-width: 750px)" srcset="img/mv_img_sp.png">
<img class="p-content-introduce__logoImg" src="img/mv_img_pc.png" alt="セクション1の画像">
</picture>
</div>
</div>
<a href="#" class="p-content-introduce__link">
<picture>
<source media="(max-width: 750px)" srcset="img/mv_XXXX_btn_sp.png">
<img class="p-content-introduce__btn" src="img/mv_XXXX_btn_pc.png" alt="セクション1の画像">
</picture>
</a>
</div>
</section>
上記のように要素全体に対して、背景画像をbackground-imageで設定しています。
自分で試したこと
・padding-topで画像の(高さ / 横幅) * 100を設定
・画像を、imgタグを用いてHTMLに直接設定
ともにうまくいかなかったためそもそもこうしたほうがいいなどアドバイスを頂けたら幸いです。
0
1Answer
0