---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day2 - 圖片處理技巧
> 建議觀看的影音章節：
> - CSS - VS Code 網頁編輯器、HTML 基礎教學
> - CSS - CSS常用語法
> - CSS - 使用 CSS 變更 HTML 標籤特性

## 練習一：處理圖片下方的空隙

圖片預設下方會有 2 ~ 3px 空隙，請同學參考[此文章](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)了解原理，
並回答下方問題。

### 題目

嘗試在 .img 內加入 CSS 語法將圖片下的空白部分移除

[示意](https://codepen.io/hexschool/pen/mdXZJar)：
> 圖片下方與 p 標籤會有一小部分空隙

HTML：

<img class="img" src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo nostrum officiis aspernatur.</p>

CSS：

.img {
  display:block;
}

## 練習二：圖片 hover 放大效果
當你將滑鼠移動到一個圖片上時，它會立即放大，通常會運用此方法來提供使用者互動回饋。

### 題目
嘗試滑鼠 hover 在 .img 時，加入 CSS 語法讓圖片會有放大的效果

<img src="https://i.imgur.com/t2fEFtP.gif" width="250">

:::spoiler 提示：
- transform scale
:::
## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
練習一：（擇一即可）
1. display:block;
2. vertical-align:top/bottom/middle/text-top/text-bottom

練習二：
.img:hover {
transform: scale(1.5);
}

-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:---------------:|:---------------------------------------------------------------------------:|
|1|Saika| [CodePan](https://codepen.io/saika4501/pen/Eaawpma)|
|2|力文| [CodePan](https://codepen.io/liwenchiou/pen/NPPaBjB?editors=1100)|
|3|7Lun| [Day2-CodePan](https://codepen.io/mfyvqhsn-the-bold/pen/vEEeaZm)|
|4|小趴|[Codepen](https://codepen.io/papa2415/pen/mdgomGx)|
|5|RUDY|[CodePan](https://codepen.io/Rudy-crw/pen/ByywPKJ)|
|6|jingle0900|[CodePan](https://codepen.io/EvaLi0472/pen/raaGrKa)|
| 7 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/MYgNKYQ?editors=1011) |
| 8 | B | [Codepen](https://codepen.io/Babel777/pen/OPPxwvZ) |
|9|蛋殼|[Codepen](https://codepen.io/weybrian/pen/bNNojVL?editors=1100)
|10|tina01170|[Codepen](https://codepen.io/tina-huang-the-bashful/pen/VYYMBxW?editors=1100)
|11|Min|[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/vEEeaqd)
|12|蛋白|[蛋白的Codepen Day2](https://codepen.io/sjlu-0/pen/vEEeaoR)
|13|蛋黃|[Codepen](https://codepen.io/yiyun12o9/pen/qEEPMZP)
| 14 | Toung | [Codepen](https://codepen.io/Toung/pen/vEEeaVW)
| 15 | 馬德 | [Codepen](https://codepen.io/maywang/pen/xbbXagL)
| 16 |WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/oggGMJw)
| 17 | 随縁 | [Codepen](https://codepen.io/zuien/pen/NPPaLrZ?editors=1100)
| 18 | mambo | [Codepen](https://codepen.io/chiang_mb/pen/YPPrORd)
| 19 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/VYYMGOg)
| 20 | poster| [Codepen](https://codepen.io/peter_hung/pen/qEEPJEQ)
| 21 | 謝天 | [Codepen](https://codepen.io/sfdplwjq-the-bold/pen/YPPrOmM)
| 22 | 里歐 | [Codepen](https://codepen.io/akihico/pen/xbbXQOb)
| 23 | haohaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/XJJeydL?editors=1100)
| 24 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/jEEGXWN)
| 25 | Atayallin | [Codepen](https://codepen.io/zin-seven/pen/xbbXmOr)
| 26 | Kath | [Codepen](https://codepen.io/JLin-the-lessful/pen/WbbZPNG)|
| 27 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/MYYELeO)|
| 28 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/MYYELmr)|
| 29 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/bNNojWK)|
| 30 | Archang | [Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/ByywvgN)|
| 31 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/QwwqoQJ) |
| 32 | dean | [Codepen](https://codepen.io/ch933114/pen/LEEzoLv) |
| 33 | Stan | [Codepen](https://codepen.io/Stan-Huang/pen/VYYMJEW) |
| 34 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/oggGKve) |
| 35 | 阿香 Mia | [Codepen](https://codepen.io/li-shiang-yu/pen/LEEOPJw) |
| 36 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/jEEaOPK) |
| 37 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/ByywXde) |
| 38 | Jinie | [Codepen](https://codepen.io/jiniecheung/pen/pvvdooZ) |
| 38 | Ali | [Codepen](https://codepen.io/Alicia1117/pen/pvvdzJP) |
| 39 | Nora| [Codepen](https://codepen.io/Yun-Jhen-Dai/pen/pvvdoeQ?editors=1100) |
| 40 | zhe | [Codepen](https://codepen.io/dotheright/pen/YPPEXpo) |
| 4 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/wBBPKyj) |
| 41 | Lewis | [Codepen](https://codepen.io/ChenLewis/pen/VYYreZM) |
| 42 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/jEEaWmO?editors=1101) |
| 43 | kiwi | [Codepen](https://codepen.io/Karen-the-flexboxer/pen/dPPZGZe) |
| 44 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/OPPOMGL) |
| 45 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/qEEVZMG) |
| 46 | ArvinSu | [Codepen](https://codepen.io/Arvin-Su/pen/zxxPKxB) |
| 47 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/ZYYaJVL) |
| 48 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/KwwyXKg) |
| 49 | crown | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/XJJzaGa) |
| 50 | dd | [Codepen](https://codepen.io/dorihung/pen/qEEVPJw) |
| 51 | KateChou | [Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/oggopOM) |
| 52 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/ZYYaRgj) |
| 53 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/WbbXmJy) |
| 54 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/jEEaJod) |
|55|Yan| [CodePan](https://codepen.io/Yan-L/pen/vEEWwpq)|
|56|Owen He| [CodePan](https://codepen.io/owen1120/pen/bNNaYjL)|
|57|孟| [CodePan](https://codepen.io/Mengru0503/pen/QwwaQyj)|
|58|Katie| [CodePan](https://codepen.io/Katiekatiehsu/pen/ByyJYez?editors=1100)|
|59|Yukon| [CodePan](https://codepen.io/ukowork/pen/oggpqRL)|
|60|Cami| [CodePan](https://codepen.io/irisLife/pen/jEEYxMJ)|
|61|ann#6212| [CodePan](https://codepen.io/yqmegupa-the-styleful/pen/JooMZbL)|
|61|yuna| [CodePan](https://codepen.io/Yuna1002/pen/gbbojXg)|
|63|Erica| [CodePan](https://codepen.io/Erica888/pen/myypGNz?editors=1100)|
|64|Hugh| [CodePan](https://codepen.io/Hugh-Chen/pen/GggyeRJ)|
|65|Aidd.| [CodePan](https://codepen.io/aiddchen/pen/yyyPEXo)|
|66|YuTing|[Codepan](https://codepen.io/venus50533/pen/jEEYJYz)|
|67|Sylvia|[Codepan](https://codepen.io/Sylvia93458/pen/jEEYjgv)|
|68|holysi|[Codepan](https://codepen.io/holysi/pen/bNNLGMo)|
|69|jane.yg|[Codepan](https://codepen.io/Jane-Yang-the-reactor/pen/xbbYzez)|
|70|An|[Codepan](https://codepen.io/bzrpsbjq-the-encoder/pen/zxxRLjy)|
|71|WEIWEI|[Codepan](https://codepen.io/weiwei93/pen/JooOMQL)|
|72|Sheena|[Codepan](https://codepen.io/Sheena-the-encoder/pen/OPPQEgY)|
|73|EdenWu|[Codepen](https://codepen.io/eden-wu/pen/azzqajN)|
|74|_ching._|[Codepen](https://codepen.io/himewbms-the-bold/pen/ZYYrMRz)
|75|Aoi|[Codepen](https://codepen.io/zching07/pen/ZYYrdmM)|
|76|stone|[Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/vEEpwPq)|
|77|Leonard|[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/QwwmWzO)|
|78|DebbyYang|[Codepen](https://codepen.io/Debby-Yang/pen/GggxgEv)|
|79|Jane|[Codepen](https://codepen.io/jkmx/pen/vEERXyy)|
|80|Yang|[Codepen](https://codepen.io/Yang-J/pen/zxxWwvB?editors=1100)
|81|Clare|[Codepen](https://codepen.io/cwwc57/pen/Wbbzjpq)
|82|anson.www|[切版任務 Day2｜Codepen](https://codepen.io/zzkvrkzi-the-sans/pen/jEEzmRq)
|82|Neria|[Codepen](https://codepen.io/JFNL/pen/oggqGzG)
|84|Chia__|[Codepen](https://codepen.io/Chia-the-encoder/pen/NPPYwpR)
|85|Jessie|[Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/VYYXrXo)
|86|糰子|[每日任務D2](https://codepen.io/hiyuki-dango/pen/MYYVraq)
|87|禹成林|[Codepen](https://codepen.io/useirin/pen/EaaEMKQ)
|88|tiffany871205|[Codepen](https://codepen.io/Tiffany-Tai/pen/RNNMzGO)
|89|tung|[Codepen](https://codepen.io/oltsegon-the-looper/pen/EaaEBoR)
|90|周周|[Codepen](https://codepen.io/jhoujhou-the-decoder/pen/EaaLjaP)
|91|William Hsieh|[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/EaaLPYG?editors=1100)
|92|andy|[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/wBBjdLL)
|93|connieK8888|[Codepen](https://codepen.io/plkang3617/pen/bNNMreR)
|94|Rogan|[Codepen](https://codepen.io/RoganHsu/pen/zxxjdBy)
|95|meowmi623| [Codepen](https://codepen.io/MeowMiii/pen/emmrGKZ)
|96|Nea|[Codepen](https://codepen.io/neacode/pen/OPPZxEr)
|97|Peggy|[Codepen](https://codepen.io/cpt23462599/pen/dPPezxO)
|98|mercury2508.|[CodePen](https://codepen.io/Mercury2508/pen/PwweQpa)|
|99|傳真機|[CodePen](https://codepen.io/DFax/pen/JoovLZa)|
|100|登登登|[CodePen](https://codepen.io/Duncanin/pen/qEEYYRe)|
|101|Waynetrece|[CodePen](https://codepen.io/waynetrece/pen/NPPMLBy)|
|102|艾琳|[CodePen](https://codepen.io/Irene-Chuang/pen/dPPeEyp?editors=1100)|
|103|yue|[CodePen](https://codepen.io/Ling-the-scripter/pen/myyLNNm?editors=1100)|
|104|chuang|[CodePen](https://codepen.io/uidoytjq-the-solid/pen/NPPzKXe?editors=1100)|
|105|kittyko|[CodePen](https://codepen.io/kittyko/pen/oggybrb)|
106|Bonochen|[CodePen](https://codepen.io/bankzdty-the-typescripter/pen/raaKMOv)
107|cheryl|[CodePen](https://codepen.io/0omilko0/pen/jEEaJod)
108|木乃伊 Kimi|[CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/raaKzoP)
109|JHT|[CodePen](https://codepen.io/juanht/pen/YPPvxMW)
110|JanllyGuo|[CodePen](https://codepen.io/Janlly-Guo/pen/azzKQEV)
| 111 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/WbbyLjj) |
| --- | ----------- | --------------------------------------------------------------------------- |
| 112 | Astrid | [2025/05/07 DAY3-2](https://codepen.io/astrid321654/pen/LEEBEKY) |
| 113 | kelsonhouse | [CodePen](https://codepen.io/Kelson-House/pen/jEEpqdJ) |
| 114 | Ado | [CodePen](https://codepen.io/dominic1835t-gmail-com/pen/RNNBvrR) |
| 115 | vima | [CodePen](https://codepen.io/chin7004/pen/LEEJZVx) |
| 116 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/zxxLyOE?editors=1100) |
| 117 | Kanaaa咖娜 | [CodePen](https://codepen.io/Kanayao/pen/YPPOYoK) |
| 118 | Maggie C. | [CodePen](https://codepen.io/Maggie-dev_xo/pen/bNNxLaY) |
| 119 | 姜承 | [CodePen](https://codepen.io/Troy0718/pen/YzJQvBN) |
| 120 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/QwwVZpO?editors=1100) |
| 121 | Acadia | [CodePen](https://codepen.io/Acadia/pen/emmLbQy) |
| 122 | Tou | [CodePen](https://codepen.io/Datou-Huang/pen/qEEMgvO?editors=1100) |
| 123 | NAOJUN | [CodePen](https://codepen.io/pzzpvwwp-the-styleful/pen/MYYPejd) |
| 124 | CharlesYang | [CodePen](https://codepen.io/kbjdutli-the-selector/pen/MYYPJNa) |
| 125 | dawnwang87 | [CodePen](https://codepen.io/yrpnrtsy-the-typescripter/pen/wBBYdBW) |
| 125 | Atian | [CodePen](https://codepen.io/A-Tian-Chen/pen/ZYYqeRy) |
| 126 | 言玿 | [CodePen](https://codepen.io/txdhiyik-the-bashful/pen/gbbBdbB?editors=1100) |
| 127 | emma8470 | [2025/05/11](https://codepen.io/emachen/pen/vEEVoma) |
| 128 | HedyChen | [CodePen](https://codepen.io/hedychen/pen/LEEXNev) |
| 129 | 富 | [CodePen](https://codepen.io/spring40747/pen/KwwrNmq) |
| 130 | MooseHD#7 | [CodePen](https://codepen.io/MooseHD/pen/ZYYmNbK) |
| 131 | 小豬佩奇 | [CodePen](https://codepen.io/HoPeiZhen/pen/MYYZYMb) |
| 132 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/yyyGpEy) |
| 133 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/EaaGpeq) |
| 134 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/OPPrGJQ) |
| 135 | 悠悠 | [CodePen](https://codepen.io/kofujztm-the-decoder/pen/OPPdNaP?editors=1100) |
| 136 | joker | [CodePen](https://codepen.io/jokersosmart/pen/wBBOaRv) |
| 137 | Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/jEEJbeY) |
| 138 | Mirage | [CodePen](https://codepen.io/sxxxswyt-the-flexboxer/pen/gbbEBWB) |
| 139 | YUN | [CodePen](https://codepen.io/sant220210/pen/PwwgNwe) |
| 140 | Yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/ByyEamj) |
| 141 |.Nonko | [CodePen](https://codepen.io/zqzvgjkd-the-builder/pen/xbbeRWd) |
| 142 | 小懿 | [CodePen](https://codepen.io/YT-the-vuer/pen/PwwgKKm) |
| 143 | RoseMary93 | [CodePen](https://codepen.io/zsdmajfv-the-scripter/pen/VYYNrPV) |
| 144 | kwk.1315 | [CodePen](https://codepen.io/K__________/pen/dPPKKzN) |
| 145 | Winter | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/vEEeaZm) |
| 146 | Wanwan | [codepen](https://codepen.io/sbrodjfj-the-styleful/pen/azzxebQ)
| 147 | Eva | [CodePen](https://codepen.io/cnbhiapb-the-scripter/pen/emmavOV)
| 148 | susu | [CodePen](https://codepen.io/rewrwscm-the-reactor/pen/JooqWvg)
| 149 | 加菲 | [CodePen](https://codepen.io/DOU-CF/pen/gbbJxPa)
| 150 | Michelle | [CodePen](https://codepen.io/bastar_dize/pen/myyYGjE?editors=1100)
| 151 | taishan_90178 | [CodePen](https://codepen.io/candy99/pen/GggVRNG)
| 152 | Kinkin| [CodePen](https://codepen.io/Kinkin-Yo/pen/ByyXGxv)
| 153 | jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/dPPEeoL)
| 154 | 富| [CodePen](https://codepen.io/spring40747/pen/KwwrNmq)
| 155 | 610| [CodePen](https://codepen.io/YI-LING-LIU/pen/QwbjeNQ)
| 156 | kent_31665 | [CodePen](https://codepen.io/kentlee406/pen/jEPWNpE)
| 157 | nonolog| [CodePen](https://codepen.io/game01-cjcu/pen/emNReEM)
| 158 | AntarcticaBear| [CodePen](https://codepen.io/AntarcticaBear/pen/yyNozpy)
| 159 | World| [CodePen](https://codepen.io/HexschoolVuePujols/pen/dPoejvo)