HTML 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 圖片標籤

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 圖片標籤

auto-resize a img fit into div

auto-resize a img fit into div

<div id="id15424" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzu6Uujzf50jYBOZcNAmd2fvNHwpnixIS7tLOXGw90X0oYXsBZZMSrgRyJ34jLISlfxP5DKudXDIJ-7n-g_FAtVzzKbpoqFsH5OdPZ23iC22GWE6k4-ug8pWrnvM7G8AGKMudXJahUCWb/s320/20190213_Jenny_60age_015.jpg" width="auto" height="aoto" /> </div> <style type="text/css"> #id15424{ position: relative; width:100%; height:100%; background-color: #888;} #id15424 img{border: 10px solid white; max-height: 80%; max-width: 80%; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; } </style>

00

div background

DIV 內置入 jpg 圖片

底圖就會依照 DIV 區塊的大小，等比縮放到區塊中。
用 CCS background-image: center，background-repeat: no-repeat 完成。

<style type="text/css">
.a17524{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.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;      /*背景的顏色*/
color: fuchsia ;
font-size: 20px ;
}
</style>


範例的效果 :

<div class="a17524" style="height: 150px; width: 400px;">

<div class="a17524" style="height: 320px; width: 600px;">

<textarea class="a17524" style="height: 320px; width: 600px;"></textarea>