HTML img 圖片標籤
HTML <img> 圖片標籤用來在網頁顯示圖片，增加網頁內容豐富程度，<img xxxx xxxx xxxx> img 標籤為一個獨立個體的，不需要像其他標籤唯雖需要結尾標籤，所以無
img 圖片標籤還包含許多不同的參數，用來替圖片做些設計，例如 border 可以替圖片增加邊框、width 可以現置圖片的顯示寬度、height 可以限制圖片的顯示高度 ... 等。
<img>語法中 src 必須之外，其他項目都是選擇項目，只要寫<img src="圖片網址">就可以把一張圖片插入到網頁中，需要替圖片做任何的設計，其他參數也不需要做任何的文字標示。
延伸閱讀 :
CSS max-width CSS max-height 屬性的功能是用來限制網頁元素最大寬度不可以超過指定的限度。
CSS min-width CSS min-height 屬性的功能是用來設定網頁元素的最低高度限制。
CSS background-image 用來設定背景圖片，設定單一網頁元素，如 DIV 區塊、span 區域或 HTML table 表格 的背景圖片。
| 參數 | 用法說明 |
| src | 圖片網址，必要項目。 |
| border | 圖片邊框，例如 border="0" 代表邊框為 0。 |
| alt | 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。 |
| title | 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。 |
| width | 圖片寬度，例如 width="120px" 代表寬度限制在 120px。 |
| height | 圖片高度，例如 height="100px" 代表高度限制在 100px。 |
| width:auto 自動判斷圖片寬度。 <img style="width:auto;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" /> |  |
| width:300px : 將圖片寬度設為 300px。 <img style="width:300px;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" /> | |
| height: 100px; width: 100px; 將圖片 寬度 高度 設為 100px。 <img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 100px; width: 100px;" /> | |
| height: inherit; width: inherit; 將圖設為父層的寬度 高度屬性值。 <div style="height: 150px; width: 150px;"> <img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: inherit; width: inherit;" /></div> | |
| max-width 及 max-height 設為 100px ， 將圖 寬度/高度 有幾大都不能超出 100px。 <img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" /> | |
| height: 50% width: 50%; ， 將圖 寬度/高度 設定跟父元素的 寬度是400px 的 50%，同樣父元素的 高度是400px 的 50% 那麼，這個 img 的 寬度/高度 應該是 200px。 原文網址：https://read01.com/jadPB.html。 <div style="height: 400px; width: 400px;"> <img src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" style="height: 50%; width: 50%;" /></div> | |
| box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。 <img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s600/images.jpg" width="200px" /> |
|
| #imgT 為這個 table id ，設定 id : < table id="imgT ......，加入下列 CCS 後出現背景圖案。 <style> #imgT {background-image: url("http://vignette1.wikia.nocookie.net/evchk/images/5/58/81421815156067047.jpg/revision/latest?cb=20140125161815"); -moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ -o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ -webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ border:2px solid #000000; /*邊框樣式與顏色*/ background-color:#CCCCCC; /*背景的顏色*/} </style> |
沒有留言:
張貼留言