使用 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 以下不支援，不過我不在乎。

Vagrant provision with docker and docker-compose install

vagrant 提供了 provision 初始化功能，可以類似 Dockerfile 在初始化 vagrant 的時候就把想要安裝的內容處理好，下面示範一下如何安裝一個乾淨的 ubuntu 後把 docker 以及 docker-compose 一併安裝。

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/focal64"
 
  config.vm.provider "virtualbox" do |vb|
    vb.memory = "1024"
  end
 
  config.vm.provision "shell", inline: <<-SHELL
    docker -v &> /dev/null
 
    if [[ $? != 0 ]]; then
      echo "start install docker"
      curl -sL https://get.docker.com/ | sudo bash
      sudo usermod -aG docker vagrant
      docker -v
    else
      echo "docker installed"
    fi
 
    docker-compose -v &> /dev/null
 
    if [[ $? != 0 ]]; then
      echo "start install docker-compose"
      sudo curl -sL "https://github.com/docker/compose/releases/download/1.29.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
      sudo chmod +x /usr/local/bin/docker-compose
      sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
      docker-compose -v
    else
      echo "docker-compose installed"
    fi
  SHELL
end

由於 provision 有可能重複使用，所以最一些執行檢查是必要的，這邊我檢查已安裝的技巧是使用 -v 這個參數，如果沒有安裝，系統會報錯，因此 $? 會非 0，藉此判斷有沒有安裝過。