CSS3中的新屬性object-view-box怎么使用

這篇文章主要講解了“CSS3中的新屬性object-view-box怎么使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3中的新屬性object-view-box怎么使用”吧！

問題

在下面的例子中，我們有一個需要裁剪的圖像。請注意，我們只想要該圖像的特定部分。

目前，我們可以通過以下方式之一來解決這個問題。

• 使用 <img> 并將其包裹在一個額外的元素中

• 使用圖像作為 background-image 并修改位置和大小

包在一個額外的元素中

這是一個常見的解決這個問題的方法,步驟如下：

• 將圖像包裹在另一個元素中（在我們的例子中是 <figure>）。

• 添加 position: relative 和 overflow: hidden

• 為圖片添加了 position: absolute，并對定位和尺寸值進行了調(diào)整，以實現(xiàn)這一結(jié)果。

<figure>
    <img src="img/brownies.jpg" alt="">
</figure>

figure {
    position: relative;
    width: 300px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 15px;
}

img {
    position: absolute;
    left: -23%;
    top: 0;
    right: 0;
    bottom: 0;
    width: 180%;
    height: 100%;
    object-fit: cover;
}

將圖像作為背景

在這個解決方案中，我們使用一個 <div> 將圖片作為背景，然后我們改變位置和大小值。

<div class="brownies"></div>

.brownies {
  width: 300px;
  aspect-ratio: 3 / 2;
  background-image: url("brownies.jpg");
  background-size: 700px auto;
  background-position: 77% 68%;
  background-repeat: no-repeat;
}

這很好，但如果我們想把上述內(nèi)容應(yīng)用于 <img> 呢？嗯，這就是 object-view-box 的作用。

引入Object-View-Box

屬性 object-view-box 可能會在 Chrome 104 中支持?，F(xiàn)在可以在 Chrome canary中使用。

根據(jù)CSS規(guī)范（https://drafts.csswg.org/css-images-4/#the-object-view-box）

object-view-box屬性在一個元素上指定了一個 "視圖框"，類似于<svg viewBox>屬性，在元素的內(nèi)容上進行縮放或平移。

該屬性的值是 <basic-shape-rect> = <inset()> | <rect()> | <xywh()>。在本文的演示中，我將著重介紹inset()的用法。

我們回到這個問題上來。

有了 object-view-box，我們就能用inset從四邊（上、右、下、左）畫一個矩形，然后應(yīng)用object-fit: cover來避免變形。

<img src="img/brownies.jpg" alt="">

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
}

這是怎么做到的呢？我們往下看。

圖像的內(nèi)在尺寸

內(nèi)在大小是默認的圖像寬度和高度。我處理的圖像大小為 1194 × 1194 px.

img {
    aspect-ratio: 1;
    width: 300px;
}

使用上述CSS，圖片的渲染尺寸將是 300×300px。

我們的目標是在固有圖像上畫一個矩形。要做到這一點，我們使用 inset()值。

使用 inset

inset()值將基于原始圖像的寬度和高度，從而形成一個裁剪過的圖像。它將幫助我們繪制一個嵌入的矩形并控制四個邊緣，類似于處理margin或padding。

inset 值定義了一個嵌入的矩形。我們可以控制四個邊緣，就像我們處理margin或padding一樣。在下面的例子中，卡片的所有邊緣都有一個20px的嵌入。

回到 object-view-box:

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
}

以下是上述內(nèi)容的背后的樣子，值 25%、20%、15%和0% 的值分別代表頂部、右側(cè)、底部和左側(cè)。

修復(fù)圖像失真

如果圖像的尺寸是正方形的，那么裁剪后的結(jié)果將是變形的。

這可以使用 object-fit 屬性來解決。

img {
    aspect-ratio: 1;
    width: 300px;
    object-view-box: inset(25% 20% 15% 0%);
    object-fit: cover;
}

放大或縮小

我們可以使用 inset 來放大或縮小圖像。根據(jù)我的測試，過渡或動畫不能與object-view-box工作。

我們也可以用一個負的 inset 值來縮小。

想象一下，這對于能夠縮放圖像是多么有用，而不需要用一個額外的元素來包裝它。

感謝各位的閱讀，以上就是“CSS3中的新屬性object-view-box怎么使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS3中的新屬性object-view-box怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！