Crop Image pada HTML dengan CSS Object-Fit

22 Oct, 2020

Kali ini gue mau ngasih tau tips trik gimana caranya menampilkan gambar yg ter-crop dengan menggunakan CSS dan HTML. Misal, pernah kan punya gambar yg gede banget trus butuh cuma beberapa bagian, tapi terlalu malas untuk menyesuaikan cropping dengan Photoshop atau image editor lainnya, mungkin ini solusinya.

Crop Image dengan Object-Fit

Cropping image pada HTML dengan bantuan CSS sebenernya cukup mudah, ga perlu script yg jelibet ataupun lainnya. Gue bakal jelasin per baris scriptnya.

Pada file htmlnya buat lah script seperti ini

<img src="url/image.jpg" />

Script diatas dipergunakan untuk memanggil gambar pada tag img. Sedangkan class cropped-image di fungsikan sebagai penanda bahwa lahan yg di gunakan untuk image ini nantinya bernama cropped-image pada htmlnya.

Pada tahap ini, kita akan melihat gambar nya tampil utuh pada HTML nya jika di view dengan browser.

Nah, tahap pembuatan HTML nya udah sampe sini aja, next kita buatkan CSS nya untuk membantu gambar nya tercrop. Isis dari CSS nya adalah seperti berikut.

/* Style untuk crop image */    
.cropped-image{
    width: 200px; /* lebar crop gambar yg diinginkan */
    height: 200px; /* tinggi crop gambar yg diinginkan */
    object-fit: cover;
    object-position: 20% 10%; /* menentukan view crop image yg diinginkan */ 
    border: 5px solid black;
}

Nah, karna sebelumnya gue menggunakan class dengan nama cropped-image maka di file css nya kita menggunakan .cropped-image. Hal ini di tujukan agar style yg kita berikan tertuju pada div class dengan nama cropped-image.

Tag Object-fit, adalah tag yg digunakan untuk menempatkan gambar ataupun video pada sebuah kontener dengan variasi jenis.

Variasi Object-fit,

object-fit: fill;

Object-fit jenis ini hampir tidak ada bedanya dengan tanpa menggunakan Object-fit tag pada gambar. Karna full gambar tetap akan mengikuti ukuran yg di tetapkan oleh tag width dan height.

object-fit: contain;

Object-fit: contain ini lebih mengedepankan penampilan keseluruhan dari gambar ataupun video dengan mengecilkan skala nya dengan mem-fit kan lebar nya dengan lebar width kontainer, tanpa merubah proporsi dari fotonya tersebut.

object-fit: cover;

Object-fit: cover ini adalah yg kita gunakan, yap tag ini menampilkan image dengan kesesuaian dari tinggi kontainer dan memotong bagian berlebih di kiri dan kanannya.

object-fit: none;

Object fit: none digunakan untuk menampilkan gambar dengan bagian tertentu dengan skala dan size full. Untuk mengatur bagian yg ingin dtampilkan menggunakan object-position.

object-fit: scale-down;

Sedangkan yg scale-down adalah object-fit yg lebih mengedepankan penampilan keseluruhan image dengan mengecilkan scala sesuai dengan kontainer yg di berikan padanya.

Temen-temen bisa memilih menggunakan Object-Fit manapun, tergantung dengan kebutuhan, hanya saja untuk melakukan cropping image, gue menyarankan menggunakan Object-Fit: Cover.

Crop Image pada HTML dengan CSS Object-Fit