img 圖片標籤

HTML img 圖片標籤

<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">

參數	用法說明
src	圖片網址，必要項目。
border	圖片邊框，例如 border="0" 代表邊框為 0。
alt	圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title	圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width	圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height	圖片高度，例如 height="100px" 代表高度限制在 100px。

width:auto 自動判斷圖片寬度。
<img style="width:auto;" src="https://xxx.jpg" />

width:300px : 將圖片寬度設為 300px。
<img style="width:300px;" src="https://xxx.jpg" />

height: 100px; width: 100px;  將圖片 寬度 高度 設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px;" />

height: inherit ; width: inherit;  將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit;" /></div>

max-width 及 max-height 設為 100px  ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" />

height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.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://xxx.jpg" width="200px" />

#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-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>

#HTML#img 圖片標籤#html img#HTML 圖片標籤