LP制作にあたりレスポンシブ対応に関して

Question

実現したいこと

LP制作にあたり、
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れるため修正したい

発生している問題・分からないこと

・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れている

該当のソースコード

&-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%;
}

<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>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

可変した際、背景が縮む際に画像の挙動がおかしい

補足

自分で試したことは以下になります。
・padding-topで画像の(高さ / 横幅) * 100を設定
・画像を、imgタグを用いてHTMLに直接設定

Answer 1

Sassの一部を抜粋したのではコンパイルできないので動作確認できないの適切な回答はむずかしいです。
また、「レイアウトが崩れる」だけで、どのようなレイアウトを想定して、実際はどうなるかの説明がないと、アドバイスはむずかしいです。

とりあえず、

padding-topで画像の(高さ / 横幅) * 100を設定

ということからアスペクト比を固定したいだと推測しますが、だとしたら、CSSのaspect-ratioを使うといいでしょう。

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

CSSのaspect-ratioプロパティで手軽にアスペクト比を設定する | Free Style

追記

アスペクト比を固定する方法は、aspect-ratioが実装される前は、
padding で余白をとり、その余白部分に内容を絶対配置(position:absolute)でレイアウトするという方法をとっていました。
しかし、この方法は内容を絶対配置するためにいろいろ複雑になります。

aspect-ratioを使えばpaddingと絶対配置を使う必要はなくシンプルにアスペクト比を固定できます。

とりあえず質問のHTMLコードの親要素(p-content-introduce)のアスペクト比を固定する場合のCSSコード例です。

.p-content-introduce {
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 100 / 49;
  background: url();
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .p-content-introduce {
    aspect-ratio: 100 / 121;
  }
}

CodePenサンプル

Comments

[t.sho]

ご回答ありがとうございます。

・どのようなレイアウトを想定しているのか
backgroundで設定した画像内に文字列や画像を配置したい。
そしてその背景画像をpositionのrelativeに設定し、画像と文字列をpositionのabsoluteを使用し、その背景画像内に埋め込もうとしています。

・実際はどうなるか
可変させた時に、背景画像のみが縮んでしまい、中の文字列や画像の要素群が縮まない
通常であれば背景画像が縮むにあたって、中の要素もそれに応じた大きさ等になるのが理想になります。

伝わりづらい部分あるかと思いますが、可能であればお手数をおかけいたしますが再度ご確認よろしくお願いいたします。

※参考に共有いただいた、aspect-ratioではうまく実現できませんでした。
再度確認してみます。

[hatena19]

まずは、回答者が実行可能なコードを提示してください。
Sassの抜粋では実行できません。
Sassではなくコンパイル後のCSSコードを提示した方が回答が付きやすいでしょう。

[hatena19]

> 可変させた時に、背景画像のみが縮んでしまい、中の文字列や画像の要素群が縮まない
> 通常であれば背景画像が縮むにあたって、中の要素もそれに応じた大きさ等になるのが理想になります。

「中の文字列や画像の要素群」を親要素幅(画面幅)の拡縮に合わせて拡縮させたいのなら、
その要素の幅やフォントサイズをvw単位でしていすればいいでしょう。
vwは画面幅を基準(画面幅=100vw)にします。
親要素を記述にする場合は、コンテナクエリ単位のcqwを使います。

[t.sho]

ご確認いただきありがとうございます。
承知いたしました、確認してみます。
ご丁寧にありがとうございました。