Menentukan beberapa lebar slot

Katie Hempenius
Katie Hempenius
X

Coba demo ini

  • Untuk melihat pratinjau situs, tekan View App. Lalu, tekan Fullscreen 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

  • Lihat index.html untuk mendapatkan 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: "100% dari lebar area tampilan" pada area tampilan dengan lebar hingga 480 piksel, "50% dari lebar area pandang" pada layar dengan lebar 481–1024 piksel, dan 800 piksel pada layar yang lebih lebar dari 1024 piksel. Lebar ini cocok dengan lebar yang ditentukan dalam CSS.

Kemampuan untuk menentukan beberapa lebar slot mengakomodasi tata letak halaman yang menggunakan gaya visual yang berbeda (yaitu, lebar gambar) untuk ukuran area pandang yang berbeda.

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 atau min-width) dan lebar slot.
  • Item terakhir dalam daftar ini adalah lebar slot default. Ini adalah setelan default, sehingga Anda tidak perlu menentukan kondisi media.
  • Anda dapat mencantumkan lebar slot sebanyak yang diinginkan - jumlah gambar yang tercantum di srcset tidak masalah.

  • Lebar slot dapat ditentukan menggunakan berbagai satuan. Berikut adalah semua lebar yang valid:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Berikut ini adalah lebar yang tidak valid:

  • 25% (persentase tidak dapat digunakan dengan atribut ukuran)