max-width Özelliği
max-width özelliği, bir elemanın maksimum
genişliğini belirler. Özelliğin değeri olarak
herhangi bir boyut birimi
veya değer olmadığını belirten none anahtar kelimesi
kullanılabilir.
Bu özellik genellikle esnek genişliğe sahip bir eleman
için belirlenir (genişlik yüzde olarak verilmiştir veya
hiç belirtilmemiştir ve elemanın genişliği içeriği
tarafından belirlenir). Eğer elemanın genişliği yüzde
olarak belirlendiyse - tarayıcı penceresi genişletildiğinde
max-width değerine ulaşana kadar genişleyecektir.
Sözdizimi
seçici {
max-width: değer;
}
Örnek
Bu örnekte genişlik, üst elemanın genişliğinin yüzdesi
olarak belirlenmiştir. Tarayıcı penceresinin genişliğini
arttırın, konteyner de tarayıcı penceresinin genişliğine
uymak için genişleyecektir. Ancak, sadece max-width'te
tanımlanan değere, yani 900px değerine kadar
genişleyecektir. Konteyner bu genişliğe ulaştığında
genişlemeyi durduracaktır:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
height: 300px;
border: 1px solid black;
}
:
Örnek
Bu örnekte, konteynerin genişliği her iki taraftan da
sınırlandırılmıştır: 900px'den daha büyük ve
400px'den daha küçük olamaz:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
min-width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ayrıca Bakınız
-
min-widthözelliği,
bir elemanın minimum genişliğini belirler -
max-heightözelliği,
bir elemanın maksimum yüksekliğini belirler -
min-heightözelliği,
bir elemanın minimum yüksekliğini belirler