Jassif Team Institution

HTML <picture> உறுப்பு

HTML <picture> உறுப்பு வெவ்வேறு சாதனங்கள் அல்லது திரை அளவுகளுக்கு வெவ்வேறு படங்களைக் காட்ட உங்களை அனுமதிக்கிறது.

HTML <picture> உறுப்பு

HTML <picture> உறுப்பு பட வளங்களைக் குறிப்பிடுவதில் வலை மேம்பாட்டாளர்களுக்கு அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது.

<picture> உறுப்பு ஒன்று அல்லது அதற்கு மேற்பட்ட <source> உறுப்புகளைக் கொண்டுள்ளது, ஒவ்வொன்றும் srcset பண்புக்கூறு மூலம் வெவ்வேறு படங்களைக் குறிக்கிறது. இந்த வழியில் உலாவி தற்போதைய பார்வை மற்றும்/அல்லது சாதனத்திற்கு மிகவும் பொருந்தக்கூடிய படத்தைத் தேர்ந்தெடுக்கலாம்.

ஒவ்வொரு <source> உறுப்புக்கும் ஒரு media பண்புக்கூறு உள்ளது, இது படம் மிகவும் பொருத்தமானது எப்போது என்பதை வரையறுக்கிறது.

எடுத்துக்காட்டு

வெவ்வேறு திரை அளவுகளுக்கு வெவ்வேறு படங்களைக் காட்டவும்:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

<picture> உறுப்பு எப்போது பயன்படுத்தப்படுகிறது

<picture> உறுப்புக்கு இரண்டு முக்கிய நோக்கங்கள் உள்ளன:

1. பேண்ட்வித்

உங்களிடம் சிறிய திரை அல்லது சாதனம் இருந்தால், ஒரு பெரிய படக் கோப்பை ஏற்றுவது அவசியமில்லை. உலாவி பொருந்தக்கூடிய பண்புக்கூறு மதிப்புகளுடன் முதல் <source> உறுப்பைப் பயன்படுத்தும், மேலும் பின்வரும் எந்த உறுப்புகளையும் புறக்கணிக்கும்.

2. வடிவ ஆதரவு

சில உலாவிகள் அல்லது சாதனங்கள் அனைத்து பட வடிவங்களையும் ஆதரிக்காது. <picture> உறுப்பைப் பயன்படுத்துவதன் மூலம், நீங்கள் அனைத்து வடிவங்களின் படங்களையும் சேர்க்கலாம், மேலும் உலாவி அது அடையாளம் காணும் முதல் வடிவத்தைப் பயன்படுத்தும், மேலும் பின்வரும் எந்த உறுப்புகளையும் புறக்கணிக்கும்.

எடுத்துக்காட்டு

உலாவி அது அடையாளம் காணும் முதல் பட வடிவத்தைப் பயன்படுத்தும்:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

பயிற்சி

HTML பட குறிச்சொற்கள்

அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML குறிச்சொல் குறிப்பைப் பார்வையிடவும்.