Thuộc tính max-width trong CSS
Trần Thị Vân - 1190
- 13/07/2025
Chức năng của Thuộc tính max-width trong CSS
Thuộc tính max-width trong CSS dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,... thuộc tính max-width thường để cho chiều rộng của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể.
Cú pháp của Thuộc tính max-width trong CSS
max-width: giatri;
giatri: Giá trị để giới hạn chiều rộng lớn nhất của phần tử HTML (Ví dụ: 500px; 50%,....)
Ví dụ Thuộc tính max-width trong CSS
max-width:400px;
max-width:50%;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính max-width trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div {width:100%; float:left; height:auto; border:1px solid red; background:#ddd; margin-bottom: 10px;}
div p{background:green; color:#fff}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính max-width trong CSS</h1>
<p>Dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,... thuộc tính max-width thường để cho chiều rộng của phần tử HTML lớn nhỏ tùy ý và giới hạn nó ở một giá trị cụ thể:</p>
<div >
<h3>max-width:400px</h3>
<p style="max-width:400px">Thuộc tính max-width trong CSS dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,...</p>
</div>
<div >
<h3>max-width:500px</h3>
<p style="max-width:500px">Thuộc tính max-width trong CSS dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,...</p>
</div>
<div >
<h3>max-width:100%</h3>
<p style="max-width:100%">Thuộc tính max-width trong CSS dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,...</p>
</div>
<div >
<h3>max-width:50%</h3>
<p style="max-width:50%">Thuộc tính max-width trong CSS dùng để giới hạn chiều rộng lớn nhất của phần tử HTML như: div, p, table, img,...</p>
</div>
</body>
</html>
Ứng dụng max-width trong thiết kế website responsive
Trong giao diện responsive, max-width giúp phần tử tự co lại khi không gian hiển thị bị thu hẹp nhưng không vượt quá một kích thước nhất định khi màn hình rộng. Cách này đặc biệt hữu ích với vùng nội dung, khối thông tin và các thành phần cần duy trì tỷ lệ hợp lý trên nhiều thiết bị.
Thay vì đặt một chiều rộng cố định, có thể kết hợp width và max-width để phần tử vừa linh hoạt vừa có giới hạn rõ ràng. Nhờ đó, bố cục hạn chế tình trạng nội dung quá rộng trên máy tính nhưng vẫn hiển thị vừa vặn trên điện thoại.
Kết hợp max-width với width để tạo bố cục linh hoạt
width xác định kích thước mà phần tử hướng tới, trong khi max-width đặt ra giới hạn không được vượt qua. Khi sử dụng cùng nhau, phần tử có thể chiếm không gian phù hợp với màn hình nhưng sẽ dừng lại khi đạt giới hạn tối đa.
.container {
width: 90%;
max-width: 1200px;
}
Với cách thiết lập này, .container có thể sử dụng khoảng 90% chiều rộng khả dụng trên màn hình nhỏ hoặc vừa. Khi màn hình đủ lớn, chiều rộng sẽ không tiếp tục tăng quá 1200px. Đây là cách đơn giản để tạo vùng nội dung linh hoạt mà không cần đặt nhiều giá trị chiều rộng cho từng kích thước màn hình.
Điểm quan trọng là max-width không thay thế hoàn toàn cho width. Hai thuộc tính có thể bổ trợ nhau để kiểm soát cả khả năng co giãn và giới hạn kích thước của phần tử.
Sử dụng max-width để kiểm soát kích thước hình ảnh
Hình ảnh có chiều rộng cố định dễ gây tràn khỏi vùng hiển thị khi được đặt trong màn hình nhỏ. Đặt max-width: 100% giúp hình ảnh không vượt quá chiều rộng của phần tử chứa.
img {
width: 100%;
max-width: 800px;
}
Cách thiết lập này cho phép hình ảnh mở rộng khi còn đủ không gian nhưng không vượt quá 800px. Khi vùng hiển thị nhỏ hơn kích thước đó, hình ảnh sẽ thu hẹp theo chiều rộng khả dụng thay vì tạo thanh cuộn ngang.
Giới hạn chiều rộng nội dung để dễ đọc trên màn hình lớn
Màn hình lớn cho phép hiển thị rất nhiều nội dung trên cùng một dòng, nhưng một dòng văn bản quá dài lại khiến người đọc khó theo dõi. Vì vậy, giới hạn chiều rộng cho khu vực bài viết là một ứng dụng thực tế của max-width.
.article-content {
width: 100%;
max-width: 760px;
}
Khi đó, nội dung vẫn có thể sử dụng toàn bộ không gian cần thiết trên màn hình nhỏ, nhưng trên màn hình lớn sẽ dừng ở mức phù hợp. Cách bố trí này giúp phần văn bản gọn hơn, tạo khoảng trống hai bên và mang lại trải nghiệm đọc ổn định trên nhiều kích thước màn hình.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính max-width trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
