Thuộc tính max-width

Thuộc tính max-width thiết lập chiều rộng tối đa của phần tử. Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào hoặc từ khóa none, có nghĩa là không có giá trị.

Thuộc tính thường được đặt cho phần tử có chiều rộng linh hoạt (chiều rộng được đặt theo phần trăm hoặc không được đặt, và phần tử mở rộng chiều rộng bởi nội dung của nó). Nếu chiều rộng phần tử được đặt theo phần trăm - khi tăng kích thước cửa sổ trình duyệt nó sẽ tăng lên, cho đến khi đạt đến giá trị max-width.

Cú pháp

bộ chọn {
	max-width: giá trị;
}

Ví dụ

Trong ví dụ này chiều rộng là phần trăm của chiều rộng phần tử cha. Hãy tăng chiều rộng cửa sổ trình duyệt, và vùng chứa cũng sẽ tăng lên, để điều chỉnh theo chiều rộng cửa sổ trình duyệt. Tuy nhiên nó sẽ chỉ tăng lên đến giá trị được xác định trong max-width, đó là 900px. Khi vùng chứa đạt đến chiều rộng này - nó sẽ ngừng tăng:

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

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

Ví dụ

Trong ví dụ này chiều rộng của vùng chứa bị giới hạn ở cả hai phía: nó không thể trở nên lớn hơn 900px và nhỏ hơn 400px:

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

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

Xem thêm

thuộc tính min-width,
thiết lập chiều rộng tối thiểu của phần tử
thuộc tính max-height,
thiết lập chiều cao tối đa của phần tử
thuộc tính min-height,
thiết lập chiều cao tối thiểu của phần tử