Coba demo ini
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
Muat ulang aplikasi di jendela browser dengan ukuran yang berbeda untuk melihat browser memuat gambar yang berbeda dan menggunakan tata letak yang berbeda pada ukuran browser yang berbeda.
Melihat kode
- Checkout
index.html
untuk kode yang membuat ini berfungsi:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
Apa yang terjadi?
Nilai atribut sizes
menentukan bahwa lebar tampilan gambar akan menjadi:
"100% dari lebar area tampilan" pada area pandang dengan lebar hingga 480 piksel, "50% dari lebar
area pandang" pada layar dengan lebar 481–1024 piksel, dan 800 piksel di layar yang lebih lebar dari 1.024 piksel. Lebar ini cocok dengan lebar yang ditentukan di CSS.
Kemampuan untuk menentukan beberapa lebar slot akan mengakomodasi tata letak halaman yang menggunakan gaya visual berbeda (yaitu, lebar gambar) untuk berbagai ukuran area pandang.
Cara menentukan beberapa lebar slot
- Gunakan daftar yang dipisahkan koma untuk menentukan beberapa lebar slot. Setiap item daftar,
kecuali item terakhir, terdiri dari kondisi media (misalnya,
max-width
ataumin-width
) dan lebar slot. - Item terakhir dalam daftar ini adalah lebar slot default. Setelan ini merupakan default, sehingga Anda tidak perlu menentukan kondisi media.
- Anda dapat mencantumkan lebar slot sebanyak yang Anda inginkan - jumlah gambar yang tercantum dalam
srcset
tidak menjadi masalah. Lebar slot dapat ditentukan menggunakan berbagai unit. Berikut adalah semua lebar yang valid:
100px
33vw
20em
calc(50vw-10px)
Berikut ini bukan lebar yang valid:
25%
(persentase tidak dapat digunakan dengan atribut ukuran)