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 pemuatan browser 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 pandang" pada area pandang dengan lebar hingga 480 piksel, "50% dari area pandang lebar" pada layar dengan lebar 481-1024px, dan 800px pada layar yang lebih lebar dari 1024px. Ini lebarnya sesuai dengan lebar yang ditentukan dalam CSS.

Kemampuan untuk menentukan beberapa lebar slot mengakomodasi tata letak laman yang menggunakan gaya visual yang 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 untuk 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 {i>default-<i}nya, jadi Anda tidak perlu menentukan kondisi media.
  • Anda dapat mencantumkan lebar slot sebanyak yang Anda inginkan - jumlah gambar yang tercantum di srcset tidak menjadi masalah.

  • Lebar slot dapat ditentukan menggunakan beragam unit. Berikut ini 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)