Gambar responsif dan pengaturan gambar

Gambar responsif sering diimplementasikan dengan atribut srcset. Atribut srcset adalah daftar nama file gambar yang dipisahkan koma serta lebar atau deskripsi kepadatannya.

Untuk mencegah pergeseran tata letak, tetapkan atribut width dan height pada tag <img> dan <source> yang menggunakan srcset.

Deskripsi kepadatan

Untuk membuat gambar responsif yang menggunakan deskriptor kepadatan:

  • Semua gambar yang tercantum dalam src dan srcset harus memiliki rasio aspek yang sama.
  • Setel atribut width dan height agar cocok dengan dimensi gambar 1x.
  • Atribut src harus merujuk ke gambar 1x.

Deskripsi lebar

Untuk membuat gambar responsif yang menggunakan deskriptor lebar:

  • Semua gambar yang tercantum dalam src dan srcset harus memiliki rasio aspek yang sama.
  • Atribut width dan height harus cocok dengan dimensi gambar penggantian.
  • Sesuaikan gaya gambar sesuai kebutuhan. Tanpa CSS, jika Anda menetapkan width dan height pada gambar responsif yang memiliki deskripsi lebar, gambar akan selalu dirender pada ukuran yang ditetapkan tersebut. Hal ini berlaku meskipun gambar yang tercantum dalam srcset memiliki dimensi yang bervariasi. Perilaku ini mungkin tidak Anda inginkan. Menambahkan width: 100%; height: auto; atau width: 100vw; height: auto; ke gaya gambar dapat memberi Anda tampilan visual yang Anda inginkan.

Elemen gambar

Untuk membuat elemen <picture> responsif:

  • Setel atribut width dan height untuk semua tag <source>. Nilai yang sesuai untuk atribut ini bergantung pada cara tag <source> menggunakan srcset.
  • Sesuaikan gambar dengan menata gaya tag <img> yang sesuai. Tag <source> adalah elemen kosong, dan oleh karena itu gaya tidak berpengaruh.
  • Setel atribut width dan height pada tag <img>. Nilai ini harus cocok dengan ukuran intrinsik gambar penggantian.

Contoh

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>