說明對象擬合和對象位置屬性的使用。

object-fit和object-position屬性是CSS屬性，用於控制其容器內(nèi)替換元素（例如圖像或視頻）的大小和定位。當(dāng)您想將內(nèi)容的長寬比保持在佈局的特定區(qū)域時，這些屬性特別有用。

• 對象擬合：此屬性指定應(yīng)如何調(diào)整元素的內(nèi)容以適合其容器。如果內(nèi)容的固有尺寸與容器的尺寸不符，則可以選擇如何調(diào)整內(nèi)容。 object-fit的可能值fill ， contain ， cover ， none和scale-down 。每個值都決定將內(nèi)容擬合到容器中的不同方法。
• 對象位置：此屬性確定其容器內(nèi)替換元件的對齊。它的工作原理與background-position屬性類似，使您可以使用一個或兩個值（例如， center ， top ， left top ， 20% 30% ）指定內(nèi)容的位置。當(dāng)與object-fit值（如cover或contain結(jié)合使用時，此屬性特別有用，其中內(nèi)容可能大於一個或兩個維度的容器。

這些屬性共同提供了一種強(qiáng)大的方法來控製圖像和其他媒體的顯示，確保它們適合併在網(wǎng)頁上正確定位其指定空間。

如何使用對象擬合來控制其容器中圖像的縱橫比？

可以使用object-fit屬性來控制其容器中圖像的縱橫比，以指定應(yīng)如何調(diào)整圖像以適合容器的尺寸。以下是object-fit的每個值都會影響縱橫比：

• 填充：拉伸圖像以填充容器，可能會扭曲縱橫比。該值不能保留圖像的縱橫比。
• 包含：將圖像縮放以適合容器，同時保持其縱橫比。整個圖像將是可見的，但是如果圖像的縱橫比與容器的比例不匹配，則容器中可能存在空白。
• 封面：圖像縮放以覆蓋整個容器，同時保持其縱橫比。如果圖像的縱橫比與容器的比例不匹配，則圖像的一部分可能會被夾住。
• 無：根本不調(diào)整圖像的大小，並使用其內(nèi)在尺寸。這意味著保留了縱橫比，但圖像可能不適合容器內(nèi)。
• 縮小：圖像的大小好像none指定或contain大小，以較小的混凝土對像大小。此值可確保圖像在容器內(nèi)擬合，同時保留其縱橫比。

通過選擇適當(dāng)?shù)?code>object-fit值，您可以確保圖像以適合您的設(shè)計需求的方式擬合到容器中時保持其長寬比。

對象擬合的各種值之間有什麼區(qū)別，何時應(yīng)該使用？

object-fit屬性具有五個值，每個值都在其容器中如何調(diào)整圖像或其他替換元素的方式有不同的目的：

• 填充：此值拉伸內(nèi)容以完全填充容器，可能會扭曲縱橫比。當(dāng)您希望內(nèi)容覆蓋整個容器時，請使用fill而無需考慮其原始縱橫比。當(dāng)內(nèi)容的確切尺寸不如填充空間重要時，這很有用。
• 包含：此值將內(nèi)容縮放以適合容器內(nèi)的縱橫比。整個內(nèi)容將是可見的，但是容器中可能有空的空間。當(dāng)您想確?？梢娬麄€圖像並保留其縱橫比時，即使這意味著不填充整個容器，也可以使用contain 。
• 封面：此值將內(nèi)容擴(kuò)展以覆蓋整個容器，同時保持其長寬比。如果縱橫比不匹配，則可能會刪除內(nèi)容的一部分。當(dāng)您希望內(nèi)容完全填充容器時，請使用cover ，並且可以切斷內(nèi)容的一部分。
• 無：此值根本無法使用其內(nèi)在維度調(diào)整內(nèi)容大小。無論容器的尺寸如何，當(dāng)您想以原始大小顯示內(nèi)容時none使用。
• 縮放尺寸：此值將內(nèi)容大小大小，就好像none指定或contain內(nèi)容，以較小的混凝土對像大小。當(dāng)您要確保內(nèi)容符合容器的縱橫比時，請使用scale-down ，但是如果它小於容器，則還需要避免將其縮放。

object-fit的每個值都適用於不同方案，具體取決於您是否優(yōu)先填充容器，保留縱橫比或避免失真。

對象位置以什麼方式補(bǔ)充對象擬合以增強(qiáng)圖像放置？

object-position屬性通過允許您根據(jù)object-fit值調(diào)整大小後控制內(nèi)容在其容器中的確切位置來補(bǔ)充object-fit 。以下是object-position與object-fit結(jié)合使用的圖像放置的方法：

• 使用object-fit: contain ：如果圖像在一個或兩個方面的圖像小於容器，則可以使用object-position將圖像定位在可用空間中。例如，如果您希望將圖像對齊到容器的左上角，則可以使用object-position: 0% 0% 。
• 使用object-fit: cover ：如果圖像在一個或兩個維度中大於容器，則圖像的一部分將被剪輯。 object-position使您可以選擇圖像的哪個部分可見。例如，如果要專注於圖像的中心，則可以使用object-position: center 。
• 使用object-fit: none或scale-down ：如果未調(diào)整圖像以適合容器，則可以使用object-position來調(diào)整圖像在容器中的位置。如果圖像的固有尺寸比容器小，並且要將其對齊到特定位置，這將很有用。
• 使用object-fit: fill ：儘管fill圖像適合容器，但如果需要，仍可以使用object-position來微調(diào)拉伸圖像的對齊。

通過組合object-fit和object-position ，您可以精確控制其在容器中的圖像如何顯示，以確保其不僅擬合正確，而且還位於您想要的位置。

以上是說明對象擬合和對象位置屬性的使用。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！