Responsive Images

• <img>寬度設定為 100% 會撐滿容器：

  img {
    width: 100%;
    height: auto;
  }
  

  若怕圖片超過原本像素，可在外容器加上max-width限制最大寬度：

  div {
    max-width: 294px;
  }
  

• 或是直接將 <img> 寬度用 max-width: 100% 來指定：

  img {
    max-width: 100%;
    height: auto;
  }
  

• 背景圖自動覆蓋整個容器

  .banner {
    background-image: url('../img/bigBanner.jpg');
    width: 100%;
    height: 535px;
    background-size: cover;
    background-position: center;
  }
  

  f21_responsive-images.html