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

• Transformasi 2DTransformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk, ukuran dan posisi. Dengan CSS3 transformasi, kita dapat mengubah ... readmore
• CSS MarginProperti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dl ... readmore
• Cara membuat TooltipTooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah ... readmore
• Cara membuat tanggal otomatis updateMasih dalam kategori css dan javascript, kali ini kita akan belajar membuat dan memasang tanggal otomatis update setiap saat yang bisa kita pasang pada web ataupun ... readmore
• Percantik Tampilan Label Cloudmu Dengan CSS Permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan OOM RIO untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget ... readmore