在 HTML 中裁剪影象

1. 在 HTML 中使用 width、height 和 overflow CSS 屬性裁剪影象
2. 在 HTML 中使用 object-fit CSS 屬性裁剪影象

在本文中，我們將介紹在 HTML 中裁剪影象的方法。

在 HTML 中使用 width、height 和 overflow CSS 屬性裁剪影象

除了 width 和 height，CSS 容器還有一個 overflow 屬性，可用於影象裁剪。要啟用溢位屬性，我們應該將影象包含在具有特定寬度和高度的 div 內，並將 overflow 設定為 hidden。它將確保基礎容器將保留其結構，並且任何影象溢位都將隱藏在容器後面。最後，我們可以使用 margin 屬性來調整裁剪區域。此屬性有四個值。但是，只有四個值中的第一個和最後一個是必不可少的，因為它們分別表示從頂部和左側開始的畫素。

例如，在兩個不同的容器中插入帶有 URL https://tinyurl.com/k764en3w 的影象。給第二張影象一個 cropped 類，以便我們可以對其應用一些樣式並裁剪影象。在 CSS 中，選擇 cropped 類並將 height 和 width 設定為 150px。將 overflow 屬性設定為 hidden。接下來，建立一個邊框。現在，選擇 cropped 類的 img 標籤並將其邊距設定為 margin: -10px 0px 0px -180px。

通過這種方式，我們可以使用 CSS 在 HTML 中裁剪影象。

示例程式碼：

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

在 HTML 中使用 object-fit CSS 屬性裁剪影象

object-fit CSS 屬性有助於裁剪影象。它可以有五個值，但值 cover 最適合裁剪影象。將 object-fit 設定為 cover 將保留影象的縱橫比，同時仍然適合其內容框的大小。我們還可以將 object-fit 屬性與 object-position 結合使用來調整要裁剪的影象區域。object-position 屬性需要兩個值：x% 和 y% 來定點陣圖像（預設位置是 50% 50%）。我們還可以提供畫素位置：xpx 和 ypx，但這通常沒有用。

例如，插入圖片三遍。第一張為原圖，兩張為裁剪後的圖片。將類別 cropped1 和 cropped2 分配給第二張和第三張圖片。為這些圖片設定特定的寬度、高度和邊框。使用 object-fit 屬性並將其設定為 cover 在兩張圖片上。在第三張圖片中，將 object-position 屬性設定為 20% 10%。

通過這種方式，我們可以使用 CSS 在 HTML 中裁剪影象。

示例程式碼：

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}