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
dansrcset
harus memiliki rasio aspek yang sama. - Setel atribut
width
danheight
agar cocok dengan dimensi gambar1x
. - Atribut
src
harus merujuk ke gambar1x
.
Deskripsi lebar
Untuk membuat gambar responsif yang menggunakan deskriptor lebar:
- Semua gambar yang tercantum dalam
src
dansrcset
harus memiliki rasio aspek yang sama. - Atribut
width
danheight
harus cocok dengan dimensi gambar penggantian. - Sesuaikan gaya gambar sesuai kebutuhan. Tanpa CSS, jika Anda menetapkan
width
danheight
pada gambar responsif yang memiliki deskripsi lebar, gambar akan selalu dirender pada ukuran yang ditetapkan tersebut. Hal ini berlaku meskipun gambar yang tercantum dalamsrcset
memiliki dimensi yang bervariasi. Perilaku ini mungkin tidak Anda inginkan. Menambahkanwidth: 100%; height: auto;
atauwidth: 100vw; height: auto;
ke gaya gambar dapat memberi Anda tampilan visual yang Anda inginkan.
Elemen gambar
Untuk membuat elemen <picture>
responsif:
- Setel atribut
width
danheight
untuk semua tag<source>
. Nilai yang sesuai untuk atribut ini bergantung pada cara tag<source>
menggunakansrcset
. - Sesuaikan gambar dengan menata gaya tag
<img>
yang sesuai. Tag<source>
adalah elemen kosong, dan oleh karena itu gaya tidak berpengaruh. - Setel atribut
width
danheight
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>