Ιδιότητα max-width

Η ιδιότητα max-width ορίζει το μέγιστο πλάτος ενός στοιχείου. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες μεγέθους ή η λέξη-κλειδί none, που σημαίνει απουσία τιμής.

Συνήθως η ιδιότητα ορίζεται για ένα στοιχείο με πλωτό πλάτος (το πλάτος ορίζεται σε ποσοστά ή δεν ορίζεται καθόλου, και το στοιχείο διευρύνεται σε πλάτος από τα περιεχόμενά του). Εάν το πλάτος του στοιχείου ορίζεται σε ποσοστά - με την αύξηση του παραθύρου του προγράμματος περιήγησης θα αυξάνεται, μέχρι να φθάσει την τιμή max-width.

Σύνταξη

επιλογέας {
	max-width: τιμή;
}

Παράδειγμα

Σε αυτό το παράδειγμα το πλάτος είναι ποσοστό του πλάτους του γονέα. Αυξήστε το πλάτος του παραθύρου του προγράμματος περιήγησης, και ο περιέκτης θα αυξηθεί επίσης, για να προσαρμοστεί στο πλάτος του παραθύρου του προγράμματος περιήγησης. Ωστόσο, θα αυξάνεται μόνο μέχρι το μέγεθος που ορίζεται στο 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,
που ορίζει το ελάχιστο ύψος του στοιχείου