CSS The max-width Property

உறுப்பின் அதிகபட்ச அகலத்தை வரையறுக்கவும்

CSS The max-width Property

max-width பண்பானது ஒரு உறுப்பின் அதிகபட்ச அகலத்தை வரையறுக்கிறது.

இந்த பண்பு உறுப்பின் அகலம் குறிப்பிட்ட மதிப்பை விட பெரியதாக இருப்பதைத் தடுக்கிறது (சிறியதாக இருக்கலாம், ஆனால் பெரியதாக இருக்க முடியாது).

இந்த பண்பு பதிலளிக்கும் தளவமைப்புகளை உருவாக்கவும் பல்வேறு திரை அளவுகளில் உள்ளடக்கத்தின் வாசிக்கும் தன்மையை உறுதிப்படுத்தவும் பயனுள்ளதாக இருக்கிறது.

Problem with width

இங்கே குறிப்பிட்ட அகலம் (600px) கொண்ட ஒரு கிடைமட்ட மையமாக்கப்பட்ட <div> உறுப்பு உள்ளது:

width: 600px (நிலையான அகலம்)
இந்த <div> உறுப்பு 600px அகலம் கொண்டது, மற்றும் margin auto ஆக அமைக்கப்பட்டுள்ளது. இந்த <div> உறுப்பு 600px அகலம் கொண்டது, மற்றும் margin auto ஆக அமைக்கப்பட்டுள்ளது.
தற்போதைய உலாவி அகலம்: 600px

உலாவி சாளரம் உறுப்பின் அகலத்தை விட சிறியதாக இருந்தால் மேலே உள்ள <div> என்ன ஆகும்? சில உள்ளடக்கம் காட்டப்படாது, மேலும் உலாவி பக்கத்திற்கு ஒரு கிடைமட்ட உருளும் பட்டையைச் சேர்க்கலாம்.

Using max-width instead

இப்போது, நாம் max-width பண்பைப் பயன்படுத்துகிறோம். இது சிறிய சாளரங்களை உலாவியின் கையாளுதலை மேம்படுத்தும்:

max-width: 600px (அதிகபட்ச அகலம்)
இந்த <div> உறுப்பு max-width 600px கொண்டது, மற்றும் margin auto ஆக அமைக்கப்பட்டுள்ளது. இந்த <div> உறுப்பு max-width 600px கொண்டது, மற்றும் margin auto ஆக அமைக்கப்பட்டுள்ளது.
வித்தியாசத்தைக் காண 600px அகலத்தை விட குறைவாக உலாவி சாளரத்தின் அளவை மாற்றவும்!

மேலே உள்ள இரண்டு <div> க்கான CSS குறியீடு இங்கே:

Example

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Exercise

div உறுப்பின் அதிகபட்ச அகலத்தை 800px ஆக அமைக்க சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.

🎯 div உறுப்பின் அதிகபட்ச அகலத்தை 800px ஆக அமைக்க சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.

div {
  : ;
}
max-width
width
height
800px
auto
100%

CSS Properties

அகலம் தொடர்பான CSS பண்புகள்:

Property Description
max-width உறுப்பின் அதிகபட்ச அகலத்தை வரையறுக்கிறது
width உறுப்பின் அகலத்தை அமைக்கிறது

💡 முக்கிய வேறுபாடு:

width: நிலையான அகலத்தை அமைக்கிறது - உறுப்பு எப்போதும் அந்த அகலத்தில் இருக்கும்.
max-width: அதிகபட்ச அகலத்தை அமைக்கிறது - உறுப்பு சிறியதாக இருக்கலாம் ஆனால் குறிப்பிட்ட மதிப்பை விட பெரியதாக இருக்க முடியாது.