Gunakan picture untuk beralih antara file gambar persegi dan lebar pada titik henti viewport. Berikan dimensi tersendiri untuk setiap sumber dan biarkan CSS menskalakan gambar yang dipilih secara proporsional. Panduan ini membuat dan menguji contoh lokal di Mac.

Bagaimana picture beralih di antara rasio aspek yang berbeda?

Letakkan elemen source dengan kondisi media sebelum img sebagai fallback di dalam picture. Browser memilih sumber pertama yang memenuhi syarat dan kondisinya cocok, lalu memilih gambar dari srcset sumber tersebut. Ini disebut art direction: menyediakan komposisi berbeda untuk tata letak yang berbeda. HTML Standard secara eksplisit mendukung pendekatan ini. HTML Standard: Gambar

Tiga bagian bekerja bersama: source memilih resource, atribut dimensi menjelaskan proporsi resource tersebut, dan CSS mengatur ukuran tampilannya. width dan height dari sumber yang dipilih dapat menyediakan rasio aspek yang digunakan oleh gambar di dalamnya. Elemen picture itu sendiri tidak merender gambar; img-nya yang melakukannya. HTML Standard: Konten tersemat

Pilih mekanisme sesuai hasil yang Anda perlukan:

Kebutuhan Anda Mekanisme yang sesuai
Mengubah komposisi atau rasio aspek pada titik henti picture dengan source yang menggunakan media
Menawarkan resolusi berbeda dari komposisi yang sama srcset, dengan sizes saat menggunakan deskriptor lebar
Mempertahankan satu file tetapi memotongnya di dalam bingkai tetap Penentuan ukuran CSS dan object-fit: cover

Mekanisme ini menangani keputusan yang berbeda. Art direction menentukan komposisi yang ditampilkan. Pemilihan resolusi memungkinkan browser memilih kandidat yang sesuai dalam suatu komposisi. Penyesuaian CSS menentukan cara resource terpilih mengisi bingkainya. MDN mendokumentasikan penggunaan picture ini serta hubungannya dengan srcset dan properti penyesuaian. MDN: Elemen picture

Buat contoh lokal lengkap di Mac Anda

Contoh ini menggunakan dua resource SVG orisinal yang berisi lingkaran oranye dan persegi panjang bersudut membulat berwarna teal. Versi persegi menumpuk keduanya; versi lebar menempatkannya berdampingan. Semuanya berada dalam satu folder, tanpa aset eksternal atau JavaScript untuk melakukan peralihan.

Kontrak resource yang dibuat sederhana: di bawah lebar viewport 700px, gunakan resource persegi 600 × 600. Pada 700px ke atas, gunakan resource lebar 1200 × 600. Gambar yang ditampilkan mengisi area konten dengan jarak 16px di setiap sisi, hingga lebar maksimum 960px. Dimensi dan titik henti ini merupakan pilihan desain ilustratif.

Simpan dua resource bentuk

Buat folder bernama picture-demo. Gunakan editor kode teks biasa untuk membuat dua file berikut di dalamnya, dengan mempertahankan nama dan ekstensi persis seperti yang tertulis. Setiap blok berpagar berisi file lengkap; salin isinya tanpa penanda pagar Markdown.

Simpan sebagai shapes-square.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Simpan sebagai shapes-wide.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

Simpan halaman HTML

Buat index.html di folder yang sama. Jika Anda menggunakan TextEdit, pilih File > New, lalu Format > Make Plain Text sebelum menempelkan kode. Simpan file dengan ekstensi .html dan pilih Use .html jika diminta. Apple mendokumentasikan alur kerja ini untuk membuat file HTML. Apple: Bekerja dengan dokumen HTML di TextEdit pada Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Buka index.html di Safari. Dengan viewport yang cukup lebar, bentuk-bentuk tersebut seharusnya tampil berdampingan. Dengan viewport yang lebih sempit, keduanya seharusnya bertumpuk. Simpan ketiga file dalam satu folder: URL resource relatif mengacu pada lokasi file HTML.

Sumber lebar menggunakan srcset, meskipun hanya berisi satu URL. Di dalam picture, source mewajibkan srcset; atribut src-nya tidak diperbolehkan. Atribut dimensi berupa bilangan bulat tanpa satuan, jadi gunakan width="1200", bukan width="1200px". MDN: Elemen source

Mengapa mendeklarasikan dimensi pada source dan fallback?

Dimensi 600 × 600 pada fallback menjelaskan resource persegi. Dimensi 1200 × 600 pada sumber lebar menjelaskan resource lebar. Dengan menyediakan kedua pasangan, browser yang mendukungnya dapat menetapkan proporsi gambar terpilih sebelum mengunduhnya. Menggunakan kembali dimensi persegi untuk sumber lebar akan memberikan rasio awal yang keliru. HTML Standard: Atribut dimensi source

CSS kemudian mengatur lebar gambar agar sesuai dengan lebar konten yang tersedia, sementara tingginya dibiarkan otomatis. Dimensi otomatis itu memungkinkan proporsi gambar menentukan tingginya. Draf CSS sizing menjelaskan cara rasio aspek pilihan berperan dalam penentuan ukuran otomatis; menetapkan kedua dimensi secara eksplisit menghilangkan fleksibilitas tersebut. CSS Box Sizing Module Level 4

Untuk contoh ini, tata letaknya dapat diperiksa dengan perhitungan sederhana:

lebar gambar = min(lebar viewport - 32, 960)
tinggi persegi = lebar gambar
tinggi lebar = lebar gambar / 2
Lebar viewport dalam piksel CSS Resource terpilih Ukuran gambar hasil perhitungan
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Ini adalah perkiraan hasil perhitungan untuk CSS yang diberikan, dengan asumsi lebar scrollbar tidak mengurangi area konten yang tersedia. Sintaks SVG, nama resource, dimensi yang dideklarasikan, dan perhitungannya diperiksa secara terprogram; contoh ini tidak dirender di browser saat penyusunan.

Perhatikan perubahan tinggi yang besar antara 699px dan 700px. Hal itu terjadi langsung karena peralihan dari komposisi persegi ke komposisi lebar. Perubahan tersebut memang diharapkan saat mengubah ukuran. Jika terjadi lompatan kedua setelah pemuatan saat viewport tetap, periksa dimensi yang dideklarasikan dan CSS yang mungkin menimpanya.

Uji titik henti secara presisi di Safari

Responsive Design Mode di Safari memungkinkan Anda mengubah ukuran viewport halaman secara terpisah dari jendela desktop. Di pengaturan Advanced Safari, aktifkan Show features for web developers. Buka contoh, lalu pilih Develop > Enter Responsive Design Mode, atau tekan Control-Command-R. WebKit mendokumentasikan pengaturan, pintasan, dan pratinjau yang dapat diubah ukurannya. WebKit: Responsive Design Mode yang Disederhanakan

Uji 699px dan 700px terlebih dahulu, lalu viewport yang cukup sempit dan lebar. Periksa apakah komposisi berubah pada batas yang diinginkan, bentuk oranye tetap bulat, dan paragraf di bawah gambar mengikuti perubahan tingginya. Muat ulang di kedua sisi titik henti untuk memeriksa tata letak awal sekaligus perubahan ukuran.

Untuk memeriksa langsung file yang dipilih Safari, jalankan cuplikan diagnostik opsional ini di konsol Web Inspector saat melihat contoh:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Jalankan cuplikan itu lagi setelah melewati titik henti. URL terpilih seharusnya diakhiri nama file persegi atau lebar yang sesuai. Properti currentSrc melaporkan URL yang dipilih browser; nilainya saja tidak membuktikan bahwa resource berhasil dimuat. MDN: Properti currentSrc pada HTMLImageElement

Apa yang perlu diperiksa jika peralihannya tampak keliru?

Periksa pemilihan, dimensi resource, lalu penyajiannya secara berurutan. Urutan ini mencegah masalah ukuran CSS disalahartikan sebagai masalah pemilihan resource.

  1. File persegi tetap terpilih pada lebar yang besar. Pastikan viewport mencapai 700px, source mendahului img, dan source menggunakan srcset. Jika ada beberapa source, periksa urutannya: source yang cocok dan muncul lebih awal dapat didahulukan. HTML Standard: Pemilihan art direction
  2. Resource tidak muncul. Cocokkan nama file dalam markup dengan file di folder, termasuk ekstensinya. Untuk contoh ini, kedua file SVG harus berada di sebelah index.html.
  3. Resource yang benar muncul dengan bentuk yang keliru. Periksa CSS yang diterapkan pada img yang sebenarnya, terutama aturan yang menetapkan tinggi tetap. Kembalikan height: auto untuk ukuran proporsional.
  4. Gambar meloncat setelah dimuat. Bandingkan setiap pasangan dimensi yang dideklarasikan dengan rasio sebenarnya dari resource tersebut. Periksa juga apakah CSS aspect-ratio yang eksplisit menimpa proporsi yang diinginkan.

Jika desain Anda memang memerlukan bingkai tetap, tentukan perilaku penyesuaiannya dengan sengaja. object-fit: contain mempertahankan seluruh resource dan dapat menyisakan ruang kosong; cover mengisi bingkai dan dapat memotong konten; fill dapat meregangkannya. Terapkan properti penyesuaian pada img. Contoh yang diberikan tidak memerlukan bingkai tetap karena tata letaknya mengikuti proporsi resource terpilih. MDN: object-fit

Apa batas dukungan browsernya?

Dukungan untuk picture dan dukungan untuk dimensi khusus sumber merupakan pertimbangan yang terpisah. Ringkasan kompatibilitas HTML Standard mencantumkan picture pada mesin browser saat ini. MDN menandai properti source width, yang mencerminkan atribut dimensinya, tersedia di berbagai browser sejak Desember 2022. Jangan berasumsi browser lama akan mencadangkan ruang dengan benar untuk dimensi khusus sumber. HTML Standard: Elemen picture, MDN: Properti width pada HTMLSourceElement

Jika tidak ada source yang cocok, atau browser tidak mendukung picture, img sebagai fallback menyediakan gambar. Dalam contoh ini, gambar tersebut adalah komposisi persegi. Browser yang beralih resource tetapi tidak mendukung dimensi sumber mungkin baru dapat menentukan proporsi akhir gambar lebar setelah pemuatan. MDN: Elemen picture

Untuk browser target yang mendukung CSS aspect-ratio tetapi memerlukan aturan ukuran eksplisit, tambahkan cuplikan CSS berikut ke stylesheet yang ada. Cuplikan ini menyelaraskan titik henti HTML dan menyediakan rasio sementara, sambil memungkinkan rasio alami gambar yang dimuat untuk mengambil alih:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN mendokumentasikan kombinasi auto dan rasio ini, serta mencantumkan CSS aspect-ratio tersedia di berbagai browser sejak September 2021. Karena itu, cuplikan ini juga memiliki batas dukungannya sendiri. Jaga agar titik hentinya tetap selaras dengan kondisi source, dan uji versi browser yang memang perlu Anda dukung. MDN: aspect-ratio

Setelah contoh berfungsi dengan benar, ganti file sintetis dengan komposisi Anda sendiri dan perbarui dimensinya secara bersamaan. Jaga agar kondisi source, proporsi resource, dan ukuran CSS tetap konsisten, lalu ulangi pemeriksaan tepat di bawah dan di atas titik henti.

Sumber