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