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