Cara menggunakan image size css

Dengan properti object-fit ini Anda bisa menggunakannya untuk menentukan bagaimana tag HTML Unduh PDF

Unduh PDF

Panjang dan lebar gambar pada HTML menunjukkan ukuran gambar dalam piksel. Pada HTML 4.01, panjang dan lebar gambar dapat ditampilkan dalam piksel atau %. Pada HTML5, panjang dan lebar gambar harus menggunakan piksel. Artikel wikiHow ini berisi panduan untuk mengatur ukuran gambar melalui kode HTML.

Langkah

1
Buka dokumen HTML menggunakan penyunting teks. Komputer Windows dan Mac memiliki program penyunting teks, seperti Notepad dan Text Edit, yang bisa digunakan untuk membuat atau menyunting HTML. Anda dapat membuka dokumen HTML melalui program penyunting teks dengan cara mengeklik Open pada menu File. Anda juga dapat mengeklik kanan berkas yang ingin disunting lalu klik Open With….
2
Tambahkan ini pada skrip:
- src adalah tempat berkas gambar.
- alt adalah penanda (tag) yang Anda tentukan untuk gambar.
- Perhatikan bahwa angka yang dimasukkan berbentuk piksel.
- Anda juga dapat menggunakan penanda style. Sebagai contoh, kode ini akan dimasukkan pada teks: . Penanda style memastikan ukuran benda tidak akan berubah dan menolak pengubahan ukuran gambar lanjutan.[1]
3
Ubah angka height dan width. Sebagai contoh, apabila Anda memasukkan 21 pada area width dan height, ukuran gambar akan berubah menjadi setengah ukuran semula.
4
Simpan lalu buka berkas menggunakan peramban untuk melihat hasilnya. Apabila Anda tidak menyukai hasilnya, ulangi proses di atas.[2]
Iklan

Selalu sesuaikan panjang dan lebar gambar. Apabila panjang dan lebar gambar sudah diatur, ruang yang dibutuhkan gambar akan tersimpan ketika memuat halaman tersebut. Akan tetapi, apabila ini tidak dilakukan, peramban tidak dapat mengetahui ukuran gambar dan tidak bisa menyediakan ruang yang sesuai. Struktur halaman akan berubah ketika dimuat (sementara gambar terus memuat).
Mengecilkan panjang dan lebar gambar yang besar akan memaksa pengguna mengunduh gambar yang besar (walaupun gambar terlihat kecil di halaman). Untuk menghindari ini, ubah ukuran gambar menggunakan program yang sesuai sebelum digunakan pada halaman.