தகவமைப்பு படங்கள் அல்லது பதிலளிக்கக்கூடிய படங்கள் என்பது திரையின் அளவு அல்லது சாதனத்தின் அடிப்படையில் சரியான படங்களை ஏற்றுவதற்கான முறைகளின் கலவையாகும். வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு ஏற்ப தகவமைப்பு படங்கள் தானாகவே சரிசெய்யப்படும். இணையப் பக்கத்தை அணுகும் ஒவ்வொரு சாதனத்திற்கும் தகவமைப்புப் படங்களுக்கு வெவ்வேறு தளவமைப்பை உருவாக்க வேண்டும். CSS ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி தகவமைப்பு படங்களை எளிதாக உருவாக்கலாம். ஃப்ளெக்ஸ்பாக்ஸ் என்பது CSS தளவமைப்பு ஒரு பரிமாண மாதிரியாகும், இது வரிசைகள் அல்லது நெடுவரிசைகளை உருவாக்குகிறது. Flexbox ஒரு பதிலளிக்கக்கூடிய கட்டமைப்பை உருவாக்குவதை எளிதாக்குகிறது.
CSS Flexbox மூலம் தகவமைப்பு படங்களை உருவாக்க இந்த இடுகை வழிகாட்டும்.
CSS Flexbox மூலம் அடாப்டிவ் படங்களை உருவாக்குவது எப்படி?
CSS ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி தகவமைப்புப் படங்களை உருவாக்க பயனர்கள் முதலில் HTML கட்டமைப்பை உருவாக்கி பின்னர் CSS ஐப் பயன்படுத்த வேண்டும். ஒரு நடைமுறை விளக்கத்திற்கு கீழே கொடுக்கப்பட்டுள்ள நடைமுறைகளைப் பின்பற்றவும்.
HTML கட்டமைப்பை உருவாக்கவும்
உருவாக்கு a முதலில், 'என்று அமைப்பதன் மூலம் ஃப்ளெக்ஸ்பாக்ஸை உருவாக்கவும் காட்சி 'சொத்து மதிப்பு' நெகிழ்வு 'உள்ளே' படம்-கொள்கலன் ” அடுத்து, '' ஐக் குறிப்பிடுவதன் மூலம் படங்களுக்கு CSS ஐப் பயன்படுத்தவும் img ' இணைந்து ' .படங்கள்-கொள்கலன் 'பெயர். முதலில், அமைக்கவும் ' நெகிழ்வு 'சொத்து மதிப்பு' 1 ” படங்களுக்கிடையில் கிடைக்கும் இலவச இடத்தை சமமாக விநியோகிக்க. பின்னர், அமைக்கவும் அதிகபட்ச அகலம் 'சொத்து மதிப்பு' 100% ” படங்கள் அவற்றின் அசல் அகலத்தை விட அதிகமாக இல்லை என்பதை உறுதிசெய்ய. அமைக்க ' உயரம் 'சொத்து மதிப்பு' ஆட்டோ ”விகிதத்தை பராமரிக்க. கடைசியாக, படங்களுக்கு இடையே இடைவெளியைச் சேர்ப்பதன் மூலம் ' விளிம்பு 'சொத்து மதிப்பு' 10px ”: CSS ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி தழுவல் படங்கள் வெற்றிகரமாக உருவாக்கப்பட்டன. கீழே உள்ள வெளியீட்டு காட்சி உலாவி சாளரத்தை மூடுவதற்கு முன் உள்ளது: இப்போது, படம் தகவமைக்கப்பட்டதா இல்லையா என்பதைச் சரிபார்க்க உலாவி சாளரத்தை மடிக்கலாம்: CSS Flexbox மூலம் தகவமைப்பு படங்களை உருவாக்க, பயனர் முதலில் HTML கட்டமைப்பை உருவாக்க வேண்டும், பின்னர், வரையறுக்க குறிச்சொல்.
இன் உள்ளே, ' src 'படப் பாதையைக் குறிப்பிடவும் மற்றும் மாற்று படத்தைச் சேர்க்கவும்' எல்லாம் 'குறிச்சொல்:
< div வர்க்கம் = 'படங்கள் கொள்கலன்' >
< img src = 'image-1.jpg' எல்லாம் = 'முதல் படம்' >
< img src = 'image-2.jpg' எல்லாம் = 'இரண்டாவது படம்' >
div >
CSSஐப் பயன்படுத்தவும்
காட்சி: நெகிழ்வு ;
flex-wrap: மடக்கு;
}
.images-container img {
நெகிழ்வு: 1 ;
அதிகபட்ச அகலம்: 100 % ;
உயரம்: ஆட்டோ;
விளிம்பு: 10px;
}
மடக்கு முன் 
மடக்கு பிறகு 
மேலே உள்ள படம், சேர்க்கப்பட்ட படங்கள் தகவமைப்பு என்பதை உறுதிப்படுத்துகிறது. முடிவுரை
குறிச்சொல். பின்னர், CSS ஐப் பயன்படுத்தவும், CSS இன் உள்ளே 'காட்சி' பண்புகளை ' நெகிழ்வு ” Flexbox ஐ உருவாக்குவதற்காக. CSS Flexbox மூலம் தகவமைப்பு படங்களை உருவாக்குவதற்கான விரிவான வழிகாட்டியை இந்த எழுதுதல் நிரூபித்துள்ளது.