img ටැගය
img ටැගය පින්තූරයක් සාදයි. පින්තූරයට පෙත ගමන් මග
src ගුණාංගයේ සඳහන් කර ඇත. වසා දැමීමේ ටැගයක් අවශ්ය නොවේ.
ගුණාංග
| ගුණාංගය | විස්තරය |
|---|---|
src |
පින්තූරයට පෙත ගමන් මග සකසයි.
අනිවාර්ය ගුණාංගය. |
alt |
විකල්ප පෙළ, පින්තූරය හමු නොවුවහොත් (උදාහරණයක් ලෙස, එහි පෙත ගමන් මග වැරදි ලෙස සඳහන් කළහොත්) එය පින්තූරය වෙනුවට පෙන්වනු ලැබේ.
අනිවාර්ය ගුණාංගය. එය නොමැතිව තිබුනහොත් වලංගු කරන්නා (HTML හෝ CSS හි නිවැරදි බව පරීක්ෂා කරන වැඩසටහන) දෝෂ පෙන්වනු ඇත. |
width |
පින්තූරයේ පළල, පික්සල් වලින් (මෙම අවස්ථාවේ දී මිනුම් ඒකක සඳහන් කර නැත) හෝ පින්තූරයේ ප්රමුඛයෙන් ප්රතිශත වලින්. |
height |
පින්තූරයේ උස, පික්සල් වලින් (මෙම අවස්ථාවේ දී මිනුම් ඒකක සඳහන් කර නැත) හෝ පින්තූරයේ ප්රමුඛයෙන් ප්රතිශත වලින්. |
සූක්ෂ්මතා
පින්තූරයකට පළල හෝ උස කිසිවක් නියම කර නොමැති නම් - පින්තූරය එහි සැබෑ ප්රමාණය ගන්නේ. උස නියම කර ඇත්නම් - පින්තූරය නියම කළ උසට පත් වන අතර, පළල අනුවර්තනය වන්නේ එහි සමානුපාතිකයන් විකෘති නොවන පරිදිය.
පළල පමණක් නියම කර ඇත්නම් - ඒ හා සමානව, පින්තූරය උස අනුවර්තනය වන්නේ සමානුපාතිකයන් සුරැකෙන පරිදිය.
පළල හා උස දෙකම නියම කර ඇත්නම් - පින්තූරයේ සමානුපාතිකයන් විකෘති විය හැකිය (හෝ නොවිය හැකිය, ඔබ හිතන පරිදි). පළල හෝ උස (හෝ දෙකම එකට) සැබෑ ප්රමාණයට වඩා විශාල නම් - පින්තූරය විශාල වන නමුත්, ගුණාත්මකභාවය නැති වේ.
පින්තූරවලට පළල සහ උස ගුණාංගවලින් නියම කිරීම (CSS හරහා නොව) - නිර්දේශ කරනු ලැබේ. මෙම අවස්ථාවේ දී බ්රවුසරය වේගයෙන් පින්තූර බාගත කරනු ඇත - එය ලැබීමෙන් පසු එක් එක් පින්තූරයේ ප්රමාණය ගණනය කිරීමට අවශ්යතාවයක් නැත.
අවශ්යතාවයකින් තොරව සැබෑ
පින්තූර ප්රමාණය අඩු කිරීම නිර්දේශ නොකෙරේ. උදාහරණයක් ලෙස,
පින්තූරයේ සැබෑ ප්රමාණය 1000 විසි 1000
පික්සල් වන අතර, ඔබ එයට පළල 100px ලෙස නියම කරන්න.
මෙම අවස්ථාවේ දී පින්තූරය තිරයේ දිස්වන්නේ
100 පික්සල් ලෙස වුවද, සැබෑ ප්රමාණය
පුරාවටම පවතින අතර, ඒ අනුව බාගත වන්නේ
වැඩි වේලාවක් ගනී.
උදාහරණය
අපි වෙබ් අඩවියට පින්තූරයක් එකතු කරමු සහ
height සහ width ගුණාංග නියම නොකරමු.
පින්තූරය එහි සැබෑ ප්රමාණය ගන්නේ:
<img src="monkey.png" alt="වානරයා">
:
උදාහරණය
අපි පින්තූරයට width ගුණාංගය භාවිතයෙන් පළල එකතු කිරීමට
උත්සාහ කරමු, මේ සමඟ
උස අනුවර්තනය විය යුත්තේ පින්තූරයේ
සමානුපාතිකයන් සුරැකෙන පරිදිය:
<img src="monkey.png" width="200" alt="වානරයා">
:
උදාහරණය
දැන් අපි පින්තූරයට height ගුණාංගය භාවිතයෙන් උස එකතු කරමු,
මේ සමඟ පළල
අනුවර්තනය වන්නේ පින්තූරයේ සමානුපාතිකයන් සුරැකෙන පරිදිය:
<img src="monkey.png" height="100" alt="වානරයා">
:
උදාහරණය
අපි එකවරම පින්තූරයට උස සහ පළල එකතු කරමු. මේ සමඟ පින්තූරයේ සමානුපාතිකයන් විකෘති විය යුතුය (අනිවාර්ය නොවේ, නමුත් මෙම අවස්ථාවේ දී උස සහ පළල තෝරාගෙන ඇත්තේ සමානුපාතිකයන් විකෘති වන පරිදිය):
<img src="monkey.png" height="100" width="300" alt="වානරයා">
:
උදාහරණය
අපි පින්තූරයට වැරදි පෙත ගමන් මගක් සකසමු
(සරල බව සඳහා එය හිස්ව තබමු). පින්තූරය වෙනුවට
අපට alt ගුණාංගයේ අන්තර්ගතය දිස්වනු ඇත
(පෙනෙන්නේ සාමාන්ය පෙළක් ලෙස - නමුත් එය පිටපත් කිරීමට උත්සාහ කරන්න -
ඔබට කිසිවක් සාර්ථක නොවනු ඇත,
එය පින්තූරයක් ලෙස ඇදෙනු ඇත):
<img src="" alt="වානරයා">
:
මේවාත් බලන්න
-
widthගුණය,
එය මූලද්රව්යයක පළල නියම කරයි -
heightගුණය,
එය මූලද්රව්යයක පළල නියම කරයි -
figureටැගය,
එය පින්තූර සහ ඒවායේ ශීර්ෂක සමූහගත කරයි -
figcaptionටැගය,
එය පින්තූරයකට ශීර්ෂකයක් නියම කරයි -
background-imageගුණය,
එය පසුබිම් පින්තූරයක් නියම කරයි
