讓圖片自動適應容器尺寸，完美填充不變形

##為什麼要有這功能
object-fit 是調整圖片或其他媒體在容器中顯示方式的重要屬性，當媒體元素（如圖片、影片等）的比例與容器不一致時，該屬性可以決定如何縮放、填充或裁剪這些元素。它不僅可以避免圖片被拉伸變形，還能確保圖片完整顯示或覆蓋容器，這對於設計響應式網頁和多媒體展示至關重要。

##核心結構
object-fit：定義媒體元素如何適應其容器的尺寸。常見值包括：
fill：默認值，拉伸圖片以完全填滿容器，可能會變形。
contain：縮放圖片，使其適應容器，保持比例不變，可能會出現空白區域。
cover：縮放圖片，使其覆蓋整個容器，可能會裁剪圖片，但保持比例不變。
none：圖片保持其原始大小，不進行縮放。

##主要功能
保持圖片比例：確保圖片在調整大小過程中保持其寬高比例，避免變形。
靈活調整媒體佈局：讓設計者控制圖片或視頻在容器中的顯示方式，適合各種尺寸的容器。
裁剪或縮放：根據需求選擇是否縮放圖片以適應容器，或者允許部分圖片被裁剪。

##注意事項
使用 cover 時，圖片可能會被裁剪以覆蓋整個容器，而使用 contain 則可能會出現空白邊緣。
當使用 none 時，如果圖片尺寸大於容器，圖片可能會溢出容器，需要搭配 overflow 等屬性進行控制。
object-fit 適用於 、 等媒體元素，但不適用於純文本或非媒體元素。

##簡單範例應用

/* object-fit範例 */
.container {
    width: 300px;  /* 設置容器寬度 */
    height: 200px;  /* 設置容器高度 */
    border: 1px solid #ccc;  /* 設置容器邊框 */
}

img {
    width: 100%;  /* 設置圖片寬度佔滿容器 */
    height: 100%;  /* 設置圖片高度佔滿容器 */
    object-fit: cover;  /* 使用object-fit屬性調整圖片大小 */
}