画像コーディングとレスポンシブ対応

「画像コーディングでOK」なので楽ちん！ と思いきや、はたと手が止まりました。

一枚画像で処理するので、 レスポンシブ対応に気を使わないと、逆に 「文字が小さくて読めない！」となってしまう。

以下にコードを記載しています。
CSSのほうは、画面幅毎の設定が少々面倒ですが、
一度設定してしまえば、全てのセクションで使いまわしが効くため、便利です。

●HTML

<section class="top-message">
        <div class="top-message__content-inner">
          <div class="top-message__content">
            <picture>
              <source srcset="./assets/img/page-top/message/message-images-tb.jpg" media="(min-width:768px)" />
              <img src="./assets/img/page-top/message/message-images-sp.png" alt="" />
            </picture>
          </div>
        </div>
      </section>

●SCSS

.top-message__content-inner {
  overflow-x: clip;
 //X方向だけはみ出した画像を表示しない
}

.top-message__content {
  //背景画像をはみ出させるスタイル
  position: relative;

  @include mq(tb) {
//768px～1440px幅では一定の比率ではみ出す
    width: calc(2000px / 1440px * 100vw);
    transform: translateX(-13.8%);
//はみ出した画像を中心に配置する  }

  @include mq(xxl) {
//1440px～2000px幅では画像のサイズを変えない
    width: 2000px;
    left: 50%;
    margin-left: -1000px;
    transform: translateX(0);  }

  @include mq(xxxl) {
//2000px幅以上では画像サイズを画面幅に合わせる
    width: 100%;
    left: 0;
    margin-left: 0;}
・・・省略}