代码： 全选
要讓 `<img>`（高寬比固定為 3:2）**完全鋪滿父元素的高或寬**（即覆蓋整個容器，不留空白），同時**保持原始比例**且**居中**，最簡單且現代的做法就是使用 CSS `object-fit: cover` + `object-position: center`。
### 推薦方案（2026 年最佳做法）
**HTML 結構：**
```html
<div class="parent">
<img src="你的圖片.jpg" alt="描述">
</div>
```
**CSS：**
```css
.parent {
/* 父元素必須有明確的寬高（可使用 %、vw、px 等） */
width: 100%; /* 或固定如 600px */
height: 400px; /* 或固定如 300px、100vh 等 */
overflow: hidden; /* 確保超出部分被裁切 */
position: relative;
}
.parent img {
width: 100%;
height: 100%;
/* 關鍵屬性 */
object-fit: cover; /* 自動選擇填滿寬或高，保持 3:2 比例，裁切多餘部分 */
object-position: center; /* 水平垂直置中 */
}
```
### 為什麼這樣就能達成你的需求？
- `object-fit: cover` 會讓圖片**至少填滿父元素的寬和高的其中一邊**（自動判斷），另一邊如果超出就裁切。
- 如果父元素比例比 3:2 寬 → 會填滿高度，左右裁切。
- 如果父元素比例比 3:2 高 → 會填滿寬度，上下裁切。
- 如果父元素正好是 3:2 → 完全不裁切。
- `object-position: center` 保證永遠置中。
- 圖片原始 3:2 比例完全不會被拉伸變形。
### 替代方案（如果你不想裁切圖片）
如果不希望裁切，只要把 `cover` 改成 `contain` 就好：
```css
object-fit: contain;
```
這時圖片會完整顯示，但可能在上下或左右出現空白（letterbox），無法「完全鋪滿」。
### 舊瀏覽器相容寫法（不依賴 object-fit）
如果需要支援非常舊的環境，可以改用絕對定位 + `min-width/min-height`：
```css
.parent {
position: relative;
overflow: hidden;
}
.parent img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
```
效果與 `object-fit: cover` 完全相同。
這樣就搞定了！有特定父元素尺寸或響應式需求再告訴我，我可以再幫你調整。