Tag <img>
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Menetapkan atribut width
dan height
pada tag <img>
akan membantu mencegah
pergeseran tata letak. Dengan informasi ini, browser dapat menentukan jumlah ruang yang benar untuk gambar.
Setel atribut width
dan height
: Nilai atribut ini harus
disetel agar sesuai dengan dimensi gambar itu sendiri (yaitu, ukuran
intrinsiknya) -
bukan dimensi yang menjadi acuan untuk menampilkan gambar.
Sesuaikan gaya visual gambar sesuai kebutuhan: Bergantung pada gaya visual gambar yang ada,
menambahkan atribut width
dan height
dapat menyebabkan gambar dirender
secara berbeda. Dalam banyak kasus, hal ini dapat diperbaiki dengan menambahkan height: auto
atau
width: auto
ke gaya yang ada.
Gaya CSS sebelumnya |
Ubah menjadi |
img { width: 100%; } |
img { width: 100%; height: auto; } |
img { max-width: 100%; } |
img { max-width: 100% height: auto; } |
img { height: 100%; } |
img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2024-03-13 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2024-03-13 UTC."],[],[]]