Manipulasi Tampilan Gambar Dengan CSS

Untuk contoh Gambar yang akan saya manipulasi adalah :

Cropping ==>> Menampilkan hanya sebagian gambar


Kode yang saya gunakan sebagai berikut :


<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT48dGR1lt6GVytFeEWE-gM1CzM0in_gmmDhxJfnkMA3tRxVk3masevCh2N2YUG-nwUg-8K3HVBRsRS0wwB4vqZe9ZgKnze4IV_0rgIgbAoYLZ7gQLyrYfLfkANa2ss__sKZr6voVJ-YUr/s320/profil.png); background-position: 0pt 50%; background-repeat: no-repeat; height: 200px; width: 100px;">
</div>

Penjelasan :

1. Background Image ==>> Untuk menunjukan alamat gambar yang nanti akan di tampilkan
2. Background-position ==>> untuk mendefinisikan bagian mana dari gambar yang akan ditampilkan yaitu x% y%. X% adalah bagian horisontal pada gambar. Y% untuk bagian vertikal. Pada contoh di atas. 0 50% berarti gambar ditampilkan dari bagian ujung kiri paling atas sampai dengan 50% bagian gambar.
3. Background-repeat ==>> Untuk menegaskan bahwa gambar akan di tampilkan hanya sekali pada layer (<div></div>)
4. Atribut Width dan Height di gunakan untuk mengatur lebar dan tinggi gambar

Manipulasi Tampilan Gambar Dengan CSS 9out of 10 based on 10 ratings. 9 user reviews.