# 🏅 Day 44 - 練習 object-fit

當運用 `<img>` 需要固定圖片寬高時，可以搭配使用 [object-fit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) 將圖片依據容器做變化，讓圖片可以維持原比例，避免圖片變形。

以下是幾個常見的參數

1. fill（預設值） => 不論圖片長寬大小，直接將整個圖片撐滿容器。
2. contain => 維持圖片比例，將圖片長或寬撐滿其中一邊為止。
3. cover => 將整個圖片填滿整個容器，若長或寬與容器不適合，會自動裁切圖片，防止圖片變形。
4. none => 不套用任何設定。

## 題目
練習第八週下方區塊圖片設定，當圖片在手機版時需依照設計稿調整圖片寬高
可以透過這個 [模板](https://codepen.io/jmimiding4104/pen/rNEwmKp) 在 CSS 中修改 *** 的部分，依照設計稿調整圖片並避免圖片有變形的情況。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/wvLPLrw
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/VwJXGoO)|
| 02 | Hailey |[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/oNrqazr)|
| 03 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/KKjoxOq?editors=1100)|
| 04 | yoishere |[Codepen](https://codepen.io/yoishere/pen/OJevBZm)|
| 05 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/poXLxXQ)|
| 06 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/OJevavo?editors=1100)|
| 07 | Dolce_墨 |[Codepen](https://codepen.io/DolceTseng1026/pen/OJevBWb)|
| 08 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/RwzyKXy) |
| 09 | wind | [Codepen](https://codepen.io/wind7y/pen/ExBLWjZ) |
| 10 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/yLdjjWM)|
| 11 | kawa | [Codepen](https://codepen.io/z83xji6/pen/JjQvaoN) |
| 12 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/abgGxZJ) |
| 13 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/YzoLMgd) |
| 14 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/QWXxbRO) |
| 15 | Mike | [Codepen](https://codepen.io/mike2049/pen/bGPKWvB) |
| 16 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/WNqyYRd) |
| 17 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/rNEreRv) |
| 18 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/WNqKxPy) |
| 19 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/dyBjmpb) |
| 20 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/dyBjrbL) |
| 21 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/qBzJowG)|
| 22 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/mdZQGXr) |
| 23 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/ZEdZgQb) |
| 24 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/OJeKZYB) |
| 25 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/wvVvmEM) |
| 26 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/wBvZyWJ?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->