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/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/s100/css.jpg" />

<img class="kecil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/s100/css.jpg" />

<img class="besar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/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.

Judul: CSS Dimensi; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore
• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
• Cara buat menu navigasi Slide OutMasih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebi ... readmore