Ιδιότητα max-width

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

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

Σύνταξη

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

Παράδειγμα

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

Результат:

Δείτε επίσης