window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

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

沒有留言:

張貼留言