CSS Dimensi

Fitur CSS Dimensi berfungsi untuk mengontrol tinggi dan lebar suatu elemen seperti gambar dan paragraf teks. Baik Mengatur tinggi dari suatu elemen dengan menggunakan persen, Mengatur lebar suatu elemen menggunakan nilai piksel, Mengatur tinggi dan lebar maksimum atau minimum suatu elemen.

Berikut contoh penggunaan Fitur CSS Dimensi pada gambar :

<style type="text/css">
img.normal {height:auto;}
img.kecil {height:10%;width:10%;}
img.besar {height:150px;width:150px;}
</style>

<img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh-KQhX8mLBUFtKCJQGhk2_xwe4B75n8Q7R3jWCM6o4VX5SgIPLoQSR4KwtK21iVDJF4AJPwldm-jJi-Nkxd-WexjtiivR59hrfvAIGACK__5XvOq2vLtRwlldOZTUYv0CQJtvyD23MAg/s100/css.jpg" />

<img class="kecil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh-KQhX8mLBUFtKCJQGhk2_xwe4B75n8Q7R3jWCM6o4VX5SgIPLoQSR4KwtK21iVDJF4AJPwldm-jJi-Nkxd-WexjtiivR59hrfvAIGACK__5XvOq2vLtRwlldOZTUYv0CQJtvyD23MAg/s100/css.jpg" />

<img class="besar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh-KQhX8mLBUFtKCJQGhk2_xwe4B75n8Q7R3jWCM6o4VX5SgIPLoQSR4KwtK21iVDJF4AJPwldm-jJi-Nkxd-WexjtiivR59hrfvAIGACK__5XvOq2vLtRwlldOZTUYv0CQJtvyD23MAg/s100/css.jpg"/>

Berikut hasilnya :

Catatan : Untuk satuan nilai bisa menggunakan Pixel ataupun % , dan Ulr image silahkan anda ganti dengan milik anda.

Berikut contoh penggunaan Fitur CSS Dimensi pada Teks :

1. Lebar Maksimum

<style type="text/css">
div.Teks
{

max-width:150px;

}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px</div>

 Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px

2. Tinggi Maksimum

<style type="text/css">
div.Teks-B
{
max-height:50px;
}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px</div>

Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.