2018年12月9日 星期日

[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.