在 HTML 中裁剪影象

Subodh Adhikari 2023年2月19日 2022年1月2日
  1. 在 HTML 中使用 widthheightoverflow CSS 屬性裁剪影象
  2. 在 HTML 中使用 object-fit CSS 屬性裁剪影象
在 HTML 中裁剪影象

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

在 HTML 中使用 widthheightoverflow CSS 屬性裁剪影象

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

例如,在兩個不同的容器中插入帶有 URL https://tinyurl.com/k764en3w 的影象。給第二張影象一個 cropped 類,以便我們可以對其應用一些樣式並裁剪影象。在 CSS 中,選擇 cropped 類並將 heightwidth 設定為 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%)。我們還可以提供畫素位置:xpxypx,但這通常沒有用。

例如,插入圖片三遍。第一張為原圖,兩張為裁剪後的圖片。將類別 cropped1cropped2 分配給第二張和第三張圖片。為這些圖片設定特定的寬度、高度和邊框。使用 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;
}

相關文章 - HTML Image