iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

菜鳥網頁基礎系列 第 8

菜鳥網頁基礎 DAY8

今天就介紹如何插入圖片

製作一個網站網站裡面一定會放圖片,所以知道如何放圖片是很重要的。

我們會習慣性把圖片放在一個資料夾裡面,這樣比較好找圖片在哪裡,而且也不會那麼亂,CSS 應該也要一個,因為網站寫到後面會越寫越多東西 CSS 也會增加,如果移動的話要注意連結位置,因為只要這樣他會抓不到檔案然後連結都要重新調整一遍。
https://ithelp.ithome.com.tw/upload/images/20200915/20129535bzMePddCJz.png
VS Code 裡面會多一個資料夾

<body>
    <h1>圖片</h1>
    <img src="./images/0ws2YFTJcguqJ5hF1Hp3V8ELwZfAP_rMiLU2UYi1NlE.jpg" width="500" alt="">
</body>

基本上甚麼圖片的檔型都可以放,然後後面的 width=”500” 就是圖片的寬設定成是 500px,要不然你放上去的圖片他都會用原本大小的尺寸呈現出來,像我這張貓咪圖他原本大小是 1920*1281,就會把整個畫面占滿,但我把它調整成寬 500px。
https://ithelp.ithome.com.tw/upload/images/20200915/20129535svF2DCmWSd.png
調整圖片的長跟寬要注意的就是你只有調整高或是寬的話他會等比例調整,當你要高跟寬都調整的時候記得都要給。

<body>
    <h1>圖片</h1>
    <img src="./images/0ws2YFTJcguqJ5hF1Hp3V8ELwZfAP_rMiLU2UYi1NlE.jpg" width="500" height="500" alt="">
</body>

https://ithelp.ithome.com.tw/upload/images/20200915/201295357f3idE9n2f.png
這張圖片他的寬跟高都是500px


上一篇
菜鳥網頁基礎 DAY7
下一篇
菜鳥網頁基礎 DAY9
系列文
菜鳥網頁基礎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言