Jika min-width property berfungsi menentukan lebar minimal bagi sebuah elemen, maka max-width property adalah sebaliknya. Berfungsi untuk menentukan (mengatur) batas lebar (width) maksimal sebuah elemen yang ukurannya ditentukan dalam nilai tertentu. CSS2 max-width property dapat digunakan pada semua elemen dengan nilai/value dalam satuan px (pixel), em, cm, ...etc (length), % (persen) dan inherit. Internet Explorer (IE) support terhadap max width property, kecuali IE-7 dan di bawahnya. Menggunakan max-width property memungkinkan dibuatnya sebuah elemen dengan ukuran lebar yang lebih fleksibel dimana jumlah konten didalamnya tak akan berpengaruh terhadap maksimal lebar yang telah ditentukan. Jika ukuran tinggi tak dibatasi, maka semakin banyak konten elemen akan bertambah besar dalam arah vertikal (semakin tinggi ukurannya). Jika konten semakin sedikit/mengecil, maka lebar elemen akan semakin menyempit (saat digunakan bersamaan dengan css display property dengan value "inline-block").
Deklarasi css max-width property
max-width: value; max-width: 100px; max-width: 20em; max-width: 10%;
Contoh penerapan min-width property
<style type="text/css">
p {
padding: 10px;
color: #000;
background: lightgreen;
border: 1px solid #444;
max-width: 250px;
}
</style>
<p> Content here!</p>
<style type="text/css">
.mybox1 {
padding: 10px;
color: #000;
background: yellow;
border: 1px solid #444;
width: 400px;
}
.mybox2 {
display: inline-block; /* atau "display: block" untuk elemen selain div & p */
padding: 10px;
background: lightgreen;
max-width: 50%px;
}
</style>
<div class="mybox1">
<span class="mybox2">Content here!</span>
</div>Contoh penerapan min-width property pada image
Dengan max-width property, sekalipun dilakukan pengaturan width dan height seperti yang terlihat pada kode html di bawah, maka lebar image akan berukuran maksimal sesuai nilai yang ditetapkan (dalam kode di bawah sebesar 200px). Height "auto" berfungsi untuk membuat tinggi (height) image selalu dalam perbandingan ukuran sesuai ukuran image sebenarnya.<style type="text/css">
img {
max-width: 200px;
height: auto;
}
</style>
<img src="image.jpg" border="none" width="400" height="200" />Edit kode dalam box demo online di bawah ini untuk mengetahui lebih jelas fungsi CSS max-width property dan pengaruhnya terhadap beberapa elemen berbeda.
Please click the button to display. Continue with editing code and click to see the results!
wach terimakasih sekali tutornya mas..
BalasHapusartikelnya sangat membantu kak.
BalasHapusCSS