Menentukan beberapa lebar slot

Katie Hempenius
Katie Hempenius
X

Coba demo ini

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh 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 atau min-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)