使用 CSS 讓圖片不破格

現在是 responsive 的時代，所有的頁面都必須做響應式，處理這種網站的時候，圖片最令人頭痛，有時候無法規範客戶是否傳我們要求的比例，所以必須在前端做一些手腳讓畫面看起來起碼不那麼糟。

html

<div class="container">
    <div class="row row-no-gutters">
        <div class="col-md-3">
            <div class="box">
                <img src="https://via.placeholder.com/700x400.png">
            </div>
        </div>
        <div class="col-md-3">
            <div class="box">
                <img src="https://via.placeholder.com/600x400.png">
            </div>
        </div>
        <div class="col-md-3">
            <div class="box">
                <img src="https://via.placeholder.com/600x200.png">
            </div>
        </div>
        <div class="col-md-3">
            <div class="box">
                <img src="https://via.placeholder.com/300x500.png">
            </div>
        </div>
    </div>
</div>

這是大部分使用 bootstrap 時會使用的排版，一個四格圖片的配置，我放了幾張完全不同尺寸的 placeholder 圖片，一般人處理會在 img 上下 max-width: 100%，讓他寬度不會爆表，但高度的部分就會被圖片撐高了，有些人會把圖片變成 background，再利用 cover 屬性搭配 padding-top + overflow: hidden 撐高度讓圖片置中並且不破格，但這樣會影響 SEO，我自己試出了一個配置還不錯。

scss

.container {
  .box {
    width: 100%;
    padding-top: 66.6%;
    overflow: hidden;
    position: relative;
    border: 1px solid grey;
  }

  .box {
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

這樣的配置法可以在不將圖片變成 background 的情況下讓圖片滿版居中，IE 11 以下不支援，不過我不在乎。