大家好

今天用這張圖像作裁切
裁切大小還可以再移動要隱藏的部分

先設定要看到的圖像尺寸
再用 overflow 屬性，隱藏超出的部分
margin 移動 img 位置

.box{
    width: 300px;
    height: 300px;
    overflow: hidden;
    background: #f80;
}

設定要裁切的原圖尺寸和移動位置
用 width 或 height 其中一邊設定圖像尺寸，比例不變
margin 移動要隱藏的部分

.box img{
    height: 500px;
    margin-left: -195px;
}

若 width 和 height 都設定尺寸，比例就不會和原圖一樣

.box img{
    width: 500px;
    height: 500px;
    margin-top: -50px;
    margin-left: -195px;
}

.box{
    width: 300px;
    height: 300px;
    background: #f80;
}

上面的屬性只是要方便看到裁切的尺寸
可以不用
裁切只需要下面的屬性

.box img{　
    width: 300px;
    height: 300px;
    position:absolute;
    clip:rect(10px,290px,290px,10px);
}

clip:rect() 預設左上為起點
position 固定裁切的位置
值：上、右、下、左
上、下的起點是上方為 0
右、左的起點是左邊為 0

.box img{
    width: 300px;
    height: 300px;
    background: #f80;
    border-radius:50%;
    object-fit: cover;
}

這個裁切只需要 object-fit 就以裁切
object-fit 屬性有5個值
每個屬性值的具體含義如下：
none :原始尺寸
fill :預設值，填滿 box 不保持原比例
contain :保持原比例，會看到完整的圖像，長寬不足留空
cover :保持原比例，會看到部分圖像，其餘隱藏
scale-down :中文釋義“降低”。就好像依次設置了none或contain ,最終呈現的是尺寸比較小的那個。

--- 明日待續。