【SCSS/CSS🔰】スマホとPC同じ画像を使ってKVづくり

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

スマホは縦長、PCは横長

 PCは画像そのまま使うのはわかるけれど、じゃあスマホはどうするの？
横向きの画像を縦向きのでデバイスでも使う方法。

横幅100％を確保しつつ、高さを指定。
object系を使って、トリミング表示

      <div class="top-kv">
        <img
          src="/img/bg-top-kv1.png"
          width="1366"
          height="685"
          alt="top-kv"
          decoding="async"
        />
      </div>

.top-kv {
  width: 100%;
  height: 500px;

PC {
    height: 685px;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}