自適應圖片＆背景

圖片

<main class="container landing-banner">
    <img src="img/slide.jpg" alt="title page image" />
</main>

.landing-banner {
  width: 100%;

  img {
    width: 100%;
    max-height: 496px; // 設定圖片最大高度，將多餘部分讓 object-fit 材切掉
    object-fit: cover; // 填滿並維持原比例，多餘的材掉
  }
}

範例

Reference:

MDN: object-fit

背景

<main class="container landingbanner"></main>

.landingbanner {
  width: 100%;
  height: 496px;

  background-image: url("../img/slide.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: pink;
}

範例