線上書籍

一、圖片處理

1. 高清免費圖片：https://unsplash.com/
   https://unsplash.com/license
2. 簡易圖片編輯軟體：http://www.faststone.org/ (批次處理)
3. PhotoScape： http://www.photoscape.org/ps/main/index.php
4. 請下載幾張圖至 d:\ugm\source

二、程式碼

1. 包裝：.carousel
   圖片：.carousel-inner
   單項：.carousel-item 預設：.active
   .d-block ： 將display屬性改為block，.w-100 ：將寬度設為100%
   data-ride="carousel" 觸發「輪播」，.slide：轉換滑動效果 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

    

2. 控制元素
   往前 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
   往後 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
   指標 <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol>

    

3. 調整輪播圖的顯示 <style type="text/css"> .carousel .carousel-item{ height: 100vh; } .carousel .carousel-item img{ min-height: 100vh; max-height: 100vh; object-fit:cover; } </style>

   object-fit / object-position 透過這兩個屬性，我們可以控制置換元素的內容填入的位置及大小。

   PS. 置換元素指的是img、video 及 canvas …等，簡單說就是 tag 的 src 載入內容後，會取代原本元素。

   比較可惜的是， IE、edge 並不支援這兩個屬性
    

   object-fit: fill 預設值，預設會強制變形至 css 所定義的元素寬高，不管原檔比例。 contain 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。 cover 填滿元素的寬度及高度(維持原比例)，通常會剪掉部分的物件。 none 不做任何大小及比例調整。 scale-down 將會選擇設為 none 或 container 兩者間較小的那個物件。

    

4.