Sebagai front-end developer adalah lumrah untuk memastikan tampilan website kita akan terlihat bagus disegala media dan kondisi yang melanda. Kita harus memeriksa semua jenis tampilan website kita di semua media, seperti desktop maupun mobile. Salah satu kendala yang akan ditemui adalah apabila kita memiliki sebuah gambar yang besar, terlihat bagus pada desktop, tetapi akan terlihat kurang saat di mobile. Maka dari itu kalian bisa menggunakan Object-fit pada CSS.
Dengan perintah object fit maka gambar tersebut akan disesuaikan berdasarkan kondisi seperti apa yang kita inginkan agar tampilannya tetap bagus disegala media. Misalnya kalian memiliki gambar dengan ukuran 500×300 lalu kita buat widthnya menjadi 100% agar menyesuaikan disegala media. Saat ditampilkan pada browser desktop hasilnya tidak mengalami kendala. Namun saat dibuka pada handphone gambarnya terlihat gepeng. Maka dari itu kalian bisa menggunakan perintah object fit.
Cara menggunakanya bagaimana ? kalian bisa ikuti contoh code berikut ini.
Objek.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <meta charset="UTF-8"> <title>Objek Fit CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="satu"> <img src="gambarfull.jpg" alt=""> </div> <div class="dua"> <img src="gambarfull.jpg" alt=""> </div> <div class="tiga"> <img src="gambarfull.jpg" alt=""> </div> </div> </body> </html> |
Style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.container{ width: 1200px; margin: auto; } .satu,.dua,.tiga{ width: 1100px; background: red; margin-bottom: 40px; } .dua img{ width: 700px; height: 800px; } .tiga img{ width: 700px; height: 800px; object-fit: contain } |
Setelah sudah kalian simpan kedua file tersebut dengan nama dan format masing-masing. Karena file ini saling terhubung, maka harus disimpan dalam satu folder yang sama. Untuk melihat hasilnya kalian bisa buka file htmlnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.
Gambar diatas adalah gambar dengan ukuran yang sesuai dengan ukuran gambar. Lalu gambar kedua adalah masih menggunakan gambar yang sama, namun ukuranya kita ubah menjadi lebih kecil sehingga terlihat gepeng. Lalu gambar ketiga adalah gambar yang sama, ukuran pada htmlnya kita kecil namun hasilny masih terlihat bagus karena kita telah sisipkan perintah object-fit tadi. Mudah bukan ?
Sekian pembahasan mengenai Object-fit pada CSS. Semoga bermanfaat.