Anda seharusnya melihat gambar ini dalam ukuran aslinya, kecuali jika perangkat Anda sempit dan telah mengubah ukurannya
Di bawah ini adalah gambar yang sama setelah diubah ukurannya menggunakan HTML (menggunakan atribut width dan height dari tag img)
Lari
Stack editor Unstack editor
Pratinjau Editor
Anda dapat bermain dengan dimensi dan mengklik Jalankan untuk melihat pengaruhnya terhadap hasil akhir
Mengubah ukuran dengan CSS
Biasanya lebih baik menggunakan CSS untuk mengubah ukuran gambar dalam HTML. Anda dapat melakukannya dengan properti height dan width
Lari
Stack editor Unstack editor
Pratinjau Editor
Di lembar gaya saya, saya membuat kelas yang disebut cats dan saya kemudian mereferensikannya di tag img. Dengan melakukan ini, hanya gambar dengan height_0 yang akan disetel ke ukuran ini. Anda dapat menggunakan nama kelas apa pun yang Anda suka. Pastikan bahwa tag img_ mereferensikan kelas yang benar
Selain itu, dalam contoh ini saya menggunakan height_2 untuk menunjukkan ukuran gambar dalam piksel. Anda dapat menggunakan height_3 lainnya yang valid, height4, atau berbagai nilai lain yang diperlukan
Mengubah Ukuran Pertimbangan
Mengubah ukuran gambar dengan HTML/CSS hanya boleh dilakukan jika diperlukan. Biasanya lebih baik menggunakan gambar dengan ukuran yang benar terlebih dahulu daripada mengubah ukurannya dengan HTML. Ini karena mengubah ukurannya dengan HTML tidak mengurangi ukuran file — file lengkap masih harus diunduh sebelum dapat diubah ukurannya
Oleh karena itu, jika memungkinkan, ubah ukuran gambar ke dimensi yang benar terlebih dahulu menggunakan editor gambar (seperti GIMP) sebelum mengunggahnya ke situs web/blog Anda
Mengubah Ukuran Gambar Secara Dinamis
Anda dapat menggunakan properti CSS height_5 untuk mengubah ukuran gambar secara dinamis
Contoh berikut menampilkan gambar yang cukup besar di viewport kecil. Untuk melihatnya dalam berbagai ukuran area pandang, klik Editor dan Pratinjau. Anda juga dapat mengubah ukuran jendela untuk melihat gambar menyusut dan membesar
Lari
Stack editor Unstack editor
Pratinjau Editor
Dengan mengabaikan deklarasi lebar/tinggi dan hanya menggunakan height6, gambar akan ditampilkan 100% dari ukuran penampungnya, tetapi tidak lebih besar. Jika gambar lebih besar dari wadahnya, gambar akan menyusut agar pas. Namun, jika gambar lebih kecil dari penampungnya, gambar akan ditampilkan dengan ukuran aslinya (mis. e. ukurannya tidak akan bertambah agar sesuai dengan wadahnya)
Teknik ini dapat berguna saat mendesain secara responsif agar gambar/halaman web ditampilkan di berbagai perangkat berukuran
Baca terus untuk mengetahui metode lebih lanjut untuk mengubah ukuran gambar secara responsif (menggunakan elemen height7)
Ubah ukuran SEMUA Gambar
Contoh CSS sebelumnya menempatkan gaya ke dalam kelas, sehingga kita dapat menerapkannya secara selektif pada gambar tertentu. Anda juga dapat menerapkan gaya ke semua gambar jika Anda suka
Bahkan, Anda bisa menggabungkannya, sehingga semua gambar ditata dengan cara tertentu, dan kemudian juga spesifik tentang gambar tertentu
Berikut adalah contoh tampilannya
Lari
Stack editor Unstack editor
Pratinjau Editor
Ini menyetel semua elemen img ke lebar maksimum 100%
Namun, ini juga menetapkan kelas untuk thumbnail (disebut height9) yang secara eksplisit menetapkan lebar dan tingginya. Oleh karena itu, gambar dengan kelas tersebut akan diukur menggunakan dimensi eksplisit tersebut
Anda mungkin memperhatikan bahwa saya telah mengawali nama kelas dengan img0 di stylesheet. Yang saya maksud adalah, saya telah menggunakan img1 di CSS. Dengan melakukan ini, saya menetapkan bahwa hanya img elemen yang menggunakan kelas height9 yang akan menerapkan gaya tersebut. Ini mencegah Anda secara tidak sengaja menerapkan kelas ke elemen yang salah jika elemen lain menggunakan kelas dengan nama yang sama
Misalnya, jika elemen img_4 memiliki img5, kelas di atas tidak akan diterapkan padanya. Anda perlu menggunakan sesuatu seperti img_6 di stylesheet Anda untuk thumbnail video
Namun, ini sepenuhnya opsional. Jangan ragu untuk mengubah img1 menjadi hanya img8 jika Anda ingin kelas diterapkan ke semua elemen yang menggunakan kelas itu
Gambar Latar Belakang
Anda juga dapat mengubah ukuran gambar latar belakang menggunakan CSS. Khususnya, Anda dapat menggunakan properti img_9 untuk mengubah ukuran gambar latar belakang
Ini sebuah contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Dalam contoh ini, saya menggunakan kata kunci width0 untuk menentukan ukuran gambar latar belakang. Anda juga dapat memberikan nilai height3 atau height4, kata kunci width3, atau width4 (yang menentukan bahwa ukuran gambar ditentukan secara otomatis menggunakan lebar dan/atau tinggi intrinsik gambar)
Selanjutnya, semua properti CSS dapat menggunakan nilai width5, width6, dan width7
Saat bekerja dengan gambar latar belakang, Anda juga memiliki opsi untuk menggunakan properti width8 sebagai singkatan untuk menentukan URL gambar latar belakang, ukurannya, warna latar belakang, dll, semuanya sekaligus. Saya mendorong Anda untuk melihat halaman itu, karena ada beberapa hal lain yang dapat Anda lakukan sehubungan dengan mengubah ukuran/memotong/mengulangi gambar latar belakang, dll.
Elemen height7 dan Desain Responsif
Salah satu tambahan terbaru pada HTML adalah elemen height7
Elemen ini memungkinkan Anda memuat gambar yang berbeda, bergantung pada kerapatan piksel layar pengguna, ukuran viewport, format gambar, dan faktor lainnya
Ini sebuah contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Klik dua tombol orientasi di kanan atas editor untuk mengaktifkan dua gambar. Kedua tombol tersebut mengubah orientasi panel editor/pratinjau, dan karenanya lebar viewport
Cara lainnya, coba klik tombol height1, lalu ubah ukuran jendela browser Anda untuk melihat efek yang sama
Melakukan hal ini akan mengalihkan gambar dari close-up wajah anak kucing, ke versi yang lebih besar yang menyertakan seluruh tubuh anak kucing
Saya tidak tahu perangkat/ukuran layar apa yang akan Anda gunakan untuk melihat ini, jadi Anda mungkin perlu mengubah ukuran layar atau mengarahkan ulang perangkat untuk melihat efeknya. Alternatifnya, Anda dapat menyesuaikan kode untuk menggunakan lebar yang lebih sesuai untuk perangkat Anda (mis. e. ubah height_2 ke nilai yang berbeda)
Elemen height7 berisi beberapa elemen height4 untuk menentukan gambar sumber yang mungkin untuk elemen img, bergantung pada faktor seperti kerapatan piksel layar, ukuran area pandang, format gambar, dll.
Saat menggunakan elemen ini, Anda sebenarnya tidak mengubah ukuran gambar. Apa yang Anda lakukan adalah memilih gambar berukuran tepat untuk situasi tertentu
Hal yang baik tentang metode ini adalah memungkinkan Anda untuk melakukan hal-hal seperti, menampilkan versi gambar yang dipotong untuk area pandang yang lebih kecil, sambil menampilkan versi yang tidak dipotong untuk yang lebih besar