在 HTML 中裁剪影象
在本文中,我們將介紹在 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;
}