คุณสมบัติ max-width

คุณสมบัติ max-width กำหนดความกว้างสูงสุดขององค์ประกอบ ค่าของคุณสมบัติคือ หน่วยสำหรับขนาด ใดๆ หรือคำสำคัญ none ซึ่งหมายถึงไม่มีค่า

โดยปกติคุณสมบัตินี้จะถูกกำหนดให้กับองค์ประกอบที่มีความกว้างแบบลอยตัว (ความกว้างถูกกำหนดเป็นเปอร์เซ็นต์หรือไม่ได้กำหนดเลย และองค์ประกอบขยายความกว้างตามเนื้อหาของมัน) หากความกว้างขององค์ประกอบถูกกำหนดเป็นเปอร์เซ็นต์ - เมื่อหน้าต่างเบราว์เซอร์ถูกขยายใหญ่ขึ้น ความกว้างของมันจะเพิ่มขึ้นจนกว่าจะถึงค่า max-width

ไวยากรณ์

selector {
	max-width: value;
}

ตัวอย่าง

ในตัวอย่างนี้ ความกว้างเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบแม่ ขยายหน้าต่างเบราว์เซอร์ทางด้านความกว้าง และคอนเทนเนอร์ก็จะขยายตาม เพื่อปรับให้เข้ากับความกว้างของหน้าต่างเบราว์เซอร์ อย่างไรก็ตาม มันจะขยายได้เพียงจนถึงค่าที่กำหนดใน max-width ซึ่งคือ 900px เมื่อคอนเทนเนอร์มีความกว้างถึงค่านี้ - มันจะหยุดขยาย

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

ตัวอย่าง

ในตัวอย่างนี้ ความกว้างของคอนเทนเนอร์ถูกจำกัดทั้งสองด้าน: มันไม่สามารถใหญ่กว่า 900px และเล็กกว่า 400px ได้

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

ดูเพิ่มเติม

คุณสมบัติ min-width,
ซึ่งกำหนดความกว้างขั้นต่ำขององค์ประกอบ
คุณสมบัติ max-height,
ซึ่งกำหนดความสูงสูงสุดขององค์ประกอบ
คุณสมบัติ min-height,
ซึ่งกำหนดความสูงขั้นต่ำขององค์ประกอบ