ஒரு வலை உருவாக்குநராக, நீங்கள் HTML உறுப்புகளுடன் பணிபுரியும் இக்கட்டான சூழ்நிலையில் அடிக்கடி இருப்பீர்கள் - உதாரணத்திற்கு - img உறுப்பு போலல்லாமல் - நிலையான அளவு அல்லது நிலையான விகிதங்கள் இல்லை. இந்த பொருள்கள் பதிலளிக்கக்கூடிய வகையில் செயல்படுவதை நீங்கள் அடிக்கடி உறுதிப்படுத்த விரும்புகிறீர்கள், ஆனால் அகலத்திற்கும் உயரத்திற்கும் இடையிலான விகிதம் பராமரிக்கப்படுகிறது. இயல்பாக, CSS ஒரு உள்ளுணர்வு தீர்வை இங்கு வழங்காது. ஆனால் செங்குத்து திணிப்பு சொத்தின் உதவியுடன் உங்கள் இலக்கை அடைய முடியும்.
சதுரக் கட்டுரைப் படங்களின் அன்றாட உதாரணத்தை எடுத்துக் கொள்வோம், அவற்றின் கிராபிக்ஸ் சதுரமாக இருக்க வேண்டிய அவசியமில்லை, ஆனால் கூடுதல் முயற்சியின்றி 1:1 என்ற விகிதத்துடன் காட்சிப்படுத்த விரும்புகிறோம். பின்வரும் குறியீட்டைக் கொண்டு, கூடுதல் மார்க்அப் இல்லாமல் CSS ஐப் பயன்படுத்தி இதைச் செய்வது மிகவும் எளிதானது:
1bc3a80de3db90cdf0535541236d95f2
இதன் விளைவாக:
ஆனால் இது ஏன் வேலை செய்கிறது மற்றும் பிற விகிதங்களை எவ்வாறு உருவாக்குவது? இதற்கான திறவுகோல் திணிப்புச் சொத்தில் உள்ளது, இது - சதவீத மதிப்புகளில் குறிப்பிடப்பட்டுள்ளது - எப்போதும் அகலச் சொத்தின் அதே அடிப்படை மதிப்பை அடிப்படையாகக் கொண்டது (அதாவது மூல உறுப்புகளின் அகலம்). திணிப்பு-இடது மற்றும் திணிப்பு-வலது ஆகியவற்றிற்கு இது வெளிப்படையானது, திணிப்பு-மேல் மற்றும் திணிப்பு-கீழே வியக்கத்தக்கது, ஆனால் இந்த விஷயத்தில் மிகவும் உதவியாக இருக்கும்.
16: 9 என்ற விகிதத்தை நீங்கள் விரும்பினால், எடுத்துக்காட்டாக, மதிப்புகள் அகலம்: 100%; திணிப்பு-கீழ்: 56.25%;. தங்க விகிதத்தை கணக்கில் எடுத்துக் கொள்ளும் ஒரு விகிதம் அகலம்: 100%; திணிப்பு-கீழ்: 61.81%; உணரக்கூடியது.
கணக்கீட்டின் உதவியுடன் நீங்கள் விகித விகிதத்தை நேரடியாகக் குறிப்பிடலாம், எடுத்துக்காட்டாக 16: 9 க்கு திணிப்பு-கீழ்: கால் (1 / (16/9) * 100%). உறுப்பு மேலும், உள்ளமைக்கப்பட்ட கூறுகளைக் கொண்டிருந்தால், பெற்றோர் உறுப்பு திணிப்புக்கு ஈடுசெய்ய குழந்தை உறுப்பு முற்றிலும் நிலைநிறுத்தப்படுகிறது:
1bc3a80de3db90cdf0535541236d95f2
இது பின்வரும் முடிவுக்கு வழிவகுக்கிறது: