[css/scss] 自適寬度的圖片(Responsive Image)-img隨div大小改變自行縮放

將同一張圖片不切割就能用不同的尺寸顯示，效果預覽如下：

這是利用照片當作背景，並以圖片的短邊為依據，不經剪裁就能以需要的比例呈現，利用css對背景圖片設定的支援功能，設定像是background-position，如果圖片過大時從哪個位置開始進行剪裁，以下為scss撰寫的原始碼。

首先，先準備一個Parent Class，『%』後面加上名稱，在編譯成css後不會看到這個class。

%responsive-image {
 display: flex;
 width: 100%;
 flex: 100%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}

接著設定一個image-1x1的class，使所有的圖片都能以1比1的比例顯示。

// H:1, W:1
.image-1x1{
 @extend %responsive-image;
 padding-bottom: percentage(1 / 1);
}

以此類推，如果需要顯示一個長300、寬400的圖片，請在括號內填入『(3/4)』，就能達到想要的效果！

在html裡面套用這個class。

<div class="image-1x1" style="background-image: url('https://picsum.photos/400/?image=318');"></div>

我搭配bootstrap的grid system寫了一個完整的範例，可以在codepen上找到[連結]，請參考：

See the Pen Responsive Image by chenuin (@chenuin) on CodePen.

[css/scss] 水平時間軸(Horizontal Timeline)範例及原始碼分享

水平時間軸

為了方便客製化，這次使用scss來寫，並把幾個重要的參數拉出來寫，其中比較重要的是$event-num，如果有4個項目的話，會用全部的長度均分，因此請依照自己實際使用去修改這個參數。

style.scss

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

$line-color: #FA8072;  // 水平線的顏色
$point-color: #FF4500; // 圓點的顏色
$point-size: 16px;     // 圓點的大小(直徑) 
$half-point-size: $point-size/2;
$active-font-color: #FA8072;
$inactive-font-color: rgba(0, 0, 0, 0.5);
$event-num: 4;  // 圓點(項目)數量

#timeline {
  ol {
    position: relative;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px;
    height: 1px;
    padding-inline-start: 0;
  }

  li {
    position: relative;
    display: inline-block;
    float: left;
    width: calc(100% /  #{$event-num});
    height: 1px;
    background: $line-color;
    color: $inactive-font-color;
    .diplome {
      text-align: center;
      margin-top: 20px;
    }
    .point {
      content: "";
      display: block;
      width: $point-size;
      height: $point-size;
      border-radius: 50%;
      border: 1px solid $point-color;
      background: #fff;
      position: absolute;
      top: -#{$half-point-size};
      left: calc(50% - #{$half-point-size});
    }
    .timestamp {
      font-size: 14px;
      text-align: center;
    }
    &.active>.point {
      border: $half-point-size solid $point-color;
    }
    &.active>.diplome,
    &.active>.timestamp {
      color: $active-font-color;
    }
  }
}

如果習慣看css的人，可以利用一些線上的轉換網站(如：sassmeister)轉換成css。

index.html

<div class="container">
  <div id="timeline">
    <ol>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">My Birthday</h6>
        <p class="timestamp">2018/06/01</p>
      </li>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">Father's Day</h6>
        <p class="timestamp">2018/08/08</p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Helloween</h6>
        <p class="timestamp"></p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Christmas</h6>
        <p class="timestamp"></p>
      </li>
    </ol>
  </div>
</div>

原始碼放在codepen上[連結]，歡迎參考：

See the Pen Horizontal Timeline by chenuin (@chenuin) on CodePen.