Thuộc tính maxWidth (CSS max-width) đặt giới hạn trên cho chiều rộng phần tử. Phần tử không mở rộng quá giá trị này, dù container rộng hơn.
Ví dụ minh họa
Nhấn nút đặt max-width 80px cho hộp – hộp sẽ co lại tối đa 80px:
<!DOCTYPE html>
<html>
<body>
<p>Nhấn nút để đặt chiều rộng tối đa.</p>
<button type="button" onclick="display()">Max Width</button>
<div id="box">
<p>Đây là div. Đây là div. Đây là div.</p>
<p>Đây là div. Đây là div. Đây là div.</p>
<p>Đây là div. Đây là div. Đây là div.</p>
<p>Đây là div. Đây là div. Đây là div.</p>
<p>Đây là div. Đây là div. Đây là div.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.maxWidth = "80px";
}
</script>
</body>
</html>
Mối quan hệ width / min-width / max-width
Quy tắc ưu tiên: min-width > width > max-width
width: 100%; max-width: 800px; /* → Trên màn hình rộng >800px, hộp giới hạn 800px. Trên mobile <800px, hộp full màn hình. */
Ứng dụng responsive phổ biến
- Container chính:
max-width: 1200px; margin: 0 auto– căn giữa, giới hạn độ rộng đọc thoải mái. - Hình ảnh:
img { max-width: 100%; height: auto }– responsive ảnh. - Input/Textarea:
max-width: 100%– tránh tràn container.