Properti max-width

Properti max-width mengatur lebar maksimum elemen. Nilai properti dapat berupa satuan ukuran apa pun atau kata kunci none, yang berarti tidak ada nilai.

Properti ini biasanya ditetapkan untuk elemen dengan lebar fluida (lebar ditetapkan dalam persentase atau tidak ditetapkan sama sekali, dan elemen melebar secara horizontal oleh kontennya). Jika lebar elemen ditetapkan dalam persentase - saat jendela browser diperbesar lebarnya akan meningkat, hingga mencapai nilai max-width.

Sintaksis

selektor {
	max-width: nilai;
}

Contoh

Dalam contoh ini, lebarnya adalah persentase dari lebar induk. Perbesar jendela browser secara horizontal, dan kontainer juga akan membesar, untuk menyesuaikan diri dengan lebar jendela browser. Namun, ia akan membesar hanya hingga ukuran yang ditentukan di max-width, yaitu 900px. Begitu kontainer mencapai lebar ini - ia akan berhenti membesar:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Dalam contoh ini, lebar kontainer dibatasi dari kedua sisi: ia tidak bisa menjadi lebih besar dari 900px dan lebih kecil dari 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat Juga

properti min-width,
yang mengatur lebar minimum elemen
properti max-height,
yang mengatur tinggi maksimum elemen
properti min-height,
yang mengatur tinggi minimum elemen