பதிலளிக்கக்கூடிய இணையதளமானது, அது பார்க்கப்படும் திரையின் அளவையும் சாதனத்தின் பரிமாணங்களையும் மாற்றியமைக்க முடியும். இணையதளத்தின் வினைத்திறனுடன், படங்களும் உரையும் சீரமைக்கப்பட்டு பதிலளிக்கக்கூடியதாக இருப்பதும் அவசியம். சீரமைக்கப்பட்ட படங்கள் அவற்றைச் சுற்றி உரையைச் சுற்றுகின்றன. சீரமைக்கப்பட்ட உரையானது முழுப் பத்தியாகத் தோன்றும்.
இந்தக் கட்டுரை படங்கள் மற்றும் உரையை பதிலளிக்கும் வகையில் சீரமைக்கும் முறையைப் பார்க்கலாம்.
படங்கள் மற்றும் உரையை எவ்வாறு பதிலளிக்கும் வகையில் சீரமைப்பது?
பூட்ஸ்டார்ப்பைப் பயன்படுத்தி படங்கள் மற்றும் உரை உள்ளிட்ட உள்ளடக்கத்தை பதிலளிக்கும் வகையில் சீரமைக்க முடியும். ஆர்ப்பாட்டத்தை வழங்க, நாங்கள் இரண்டு எடுத்துக்காட்டுகளை பட்டியலிட்டுள்ளோம்:
- உரையை செங்குத்தாகவும் படத்தை கிடைமட்டமாகவும் மையப்படுத்தவும்.
- உரை மற்றும் பதிலளிக்கக்கூடிய படத்தை இடப்புறம் சீரமைக்கவும்.
எடுத்துக்காட்டு 1: உரையை செங்குத்தாகவும் படத்தை கிடைமட்டமாகவும் மையமாக சீரமைக்கவும்
முதலில், படத்தை கிடைமட்டமாகவும், உரையை செங்குத்தாகவும் மையப்படுத்த முயற்சிக்கவும். அந்த நோக்கத்திற்காக, கீழே கொடுக்கப்பட்டுள்ள வழிமுறைகளைப் பின்பற்றவும்:
படி 1: ஒரு HTML கட்டமைப்பை உருவாக்கவும்
ஒரு HTML கட்டமைப்பை உருவாக்கும் போது, முதலில், '' பூட்ஸ்ட்ராப் ” மற்றும் வெளிப்புற CSS கோப்பு. அதன் பிறகு, உருவாக்கவும் படி 2: CSSஐப் பயன்படுத்தவும் கொள்கலனில்: அன்று உரையில்: உரை செங்குத்தாக மையமாக இருப்பதையும், படம் கிடைமட்டமாக மையமாக இருப்பதையும் காணலாம்: எடுத்துக்காட்டு 2: உரை மற்றும் பதிலளிக்கக்கூடிய படத்தை இடதுபுறமாக சீரமைக்கவும் கொடுக்கப்பட்ட இந்த எடுத்துக்காட்டில், படமும் உரையும் இடதுபுறமாக சீரமைக்கப்படும். அந்த நோக்கத்திற்காக, கீழே உள்ள படிப்படியான வழிமுறைகளைப் பின்பற்றவும்: படி 1: ஒரு HTML கட்டமைப்பை உருவாக்கவும் HTML குறியீடு மேலே உள்ளதைப் போன்றது, எடுத்துக்காட்டில் பயன்படுத்தப்பட்டது. படி 2: CSSஐப் பயன்படுத்தவும் கொள்கலனில்: அன்று உரையில்: உரையும் படமும் இடதுபுறம் சீரமைக்கப்பட்டுள்ளன என்பதை வெளியீடு உறுதிப்படுத்துகிறது: படங்கள் மற்றும் உரையை பதிலளிக்கும் வகையில் சீரமைக்க, முதலில், CSS இல் ஒரு கட்டம் அல்லது நெகிழ்வு அமைப்பை உருவாக்கவும், பின்னர் ' align-item 'சொத்து மதிப்பு' மையம் ”. அவ்வாறு செய்வது, CSS இல் படங்கள் மற்றும் உரையை பதிலளிக்கும் வகையில் சீரமைக்கும். இந்த எழுதுதல் பயனர்களுக்கு படங்கள் மற்றும் உரையை பதிலளிக்கும் வகையில் சீரமைப்பதற்கான முழுமையான வழிகாட்டியை வழங்குகிறது. குறிச்சொல் மற்றும் உரை:
< உடல் >
< div வர்க்கம் = 'கொள்கலன்' >
< img src = 'test-image.jpg' எல்லாம் = 'சோதனை படம்' >
< div வகுப்பு = 'உரை' > இது சில உரை. div >
div >
உடல் >
:
.கொள்கலன் {
காட்சி: நெகிழ்வு ;
text-align: மையம்;
நியாயப்படுத்து-உள்ளடக்கம்: மையம்;
align-items: மையம்;
}
img {
அதிகபட்ச அகலம்: 100 % ;
உயரம்: ஆட்டோ;
}
.உரை {
எழுத்துரு அளவு: 16px;
அதிகபட்ச அகலம்: 390px;
}
:
.கொள்கலன் {
காட்சி: நெகிழ்வு ;
flex-direction: column;
align-items: flex-start;
text-align: இடது;
}
img {
அதிகபட்ச அகலம்: 100 % ;
உயரம்: ஆட்டோ;
}
.உரை {
எழுத்துரு அளவு: 16px;
அதிகபட்ச அகலம்: 390px;
}
முடிவுரை