html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月15日 星期四

HTML img 圖片標籤

HTML img 圖片標籤

           HTML  <img> 圖片標籤用來在網頁顯示圖片,增加網頁內容豐富程度,
<img xxxx xxxx xxxx> img 標籤為一個獨立個體的,不需要像其他標籤唯雖需要結尾標籤,所以無  </img> 結尾。
           img 圖片標籤還包含許多不同的參數,用來替圖片做些設計,例如 border 可以替圖片增加邊框、width 可以現置圖片的顯示寬度、height 可以限制圖片的顯示高度 ... 等。


<img src="要插入的圖片 URL" alt="圖片替代文字" title="要顯示的文字" border="圖片邊框">

<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>

沒有留言:

張貼留言