如何使用CSS對象擬合和對象位置來控製圖像的顯示方式？

如何使用CSS對象擬合和對象位置來控製圖像的顯示方式？

CSS提供object-fit和object-position屬性，以控制其包含框中顯示圖像或其他替換元素（例如視頻）的方式。當圖像的尺寸與其容器的尺寸不符時，這些屬性特別有用。

• 對象擬合：此屬性指定應如何調整替換元素的內容以適合其容器。它控制內容的縱橫比和縮放。
• 對象位置：此屬性根據object-fit調整大小後，確定容器中替換的元素內容的對齊。

要使用這些屬性，您只需將它們應用於針對圖像元素的CSS規則即可。這是一個例子：

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

在此示例中，將調整圖像大小以適合300x200像素框，同時保持其長寬比（ object-fit: cover ）。圖像內容將集中在此框中（ object-position: center ）。

對象擬合的不同值是什麼？它們如何影響圖像顯示？

object-fit屬性可以採用幾個值，每個值都會影響其容器中的圖像的顯示方式：

• 填充：這是默認值。將圖像拉伸以填充內容框，這可能會扭曲縱橫比。
• 包含：對圖像進行縮放以保持其縱橫比，同時安裝在內容框中。這意味著，如果圖像與容器的縱橫比不同，則可能不會填充整個框。
• 封面：將圖像縮放以保持其長寬比，同時填充整個內容框。如果長寬比不匹配，這可能會導致裁剪圖像。
• 無：根本不調整圖像的大小，並且以固有大小顯示。如果圖像大於容器，則將溢出。
• 縮小：圖像的大小好像none指定或contain大小，以較小的混凝土對像大小。

這些值中的每一個都提供了一種不同的方式來管理如何呈現圖像，具體取決於您的設計需求。

可以使用對象位置對其容器中的圖像對齊，如果是，如何？

是的，在用object-fit擬合調整大小後，可以使用object-position對其容器中的圖像對齊。 object-position屬性採用一個或兩個值來指定X和Y坐標以定位圖像。

object-position的語法類似於background-position屬性。以下是您如何使用它的一些示例：

• 集中圖像：

   <code class="css">img { object-position: center; }</code>

  登入後複製

• 將圖像放在右上角：

   <code class="css">img { object-position: right top; }</code>

  登入後複製

• 用精確的坐標定位圖像：

   <code class="css">img { object-position: 20% 50%; }</code>

  登入後複製

這使您可以很好地控製圖像在其容器中的確切位置，在使用object-fit: cover或contain以管理圖像大小。

如何確保圖像使用對象擬合保持其長寬比？

為了確保圖像保持其縱橫比，您應該使用contain ， cover ， none或scale-down值的object-fit屬性。以下是每個人如何幫助維持縱橫比：

• 包含：這將圖像縮放到最大的尺寸，以使其寬度和高度都適合內容框。保留了圖像的縱橫比，並且可能不會填充整個框。
• 封面：將圖像縮放到最小的尺寸，以使其寬度和高度都可以完全覆蓋內容框。保留了圖像的縱橫比，但圖像的一部分可能被裁剪。
• 無：圖像以固有大小顯示。它不會調整大小，從而保持其原始縱橫比。
• 縮小：這與none或contain一樣，以較小或相等的尺寸。它確保保持縱橫比的維持，同時也有可能減小圖像的大小以適合容器內。

除fill外，使用這些值中的任何一個都將有助於確保圖像在安裝或填充其容器時保持其長寬比。

以上是如何使用CSS對象擬合和對象位置來控製圖像的顯示方式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！