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

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

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

ไวยากรณ์

cssselector {
  max-width: value;
}

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม