Berikan imej atribut width dan height HTML yang tepat, kemudian gunakan CSS untuk menjadikan lebar paparannya responsif dan tingginya automatik. Dimensi ini membekalkan nisbah aspek awal tanpa mengunci imej pada saiz paparan tersebut. MDN: Imej multimedia

Panduan ini ditujukan kepada sesiapa yang menyunting halaman HTML pada Mac dan mahu imej diubah saiznya mengikut bekasnya sambil menempah ruang berkadaran sebelum imej dimuatkan. Contoh ini menggunakan grafik abstrak kendiri, jadi anda boleh mencuba tingkah laku pensaizan tanpa memuat turun aset.

Bagaimanakah dimensi boleh menempah ruang tanpa menetapkan saiz paparan?

Imej mempunyai dimensi sumber, seperti 1200 kali 800, dan saiz paparan yang ditentukan oleh susun atur. Angka-angka ini boleh berbeza. Atribut dimensi HTML memberikan petunjuk pensaizan; helaian gaya anda boleh mengatasi lebar dan tinggi yang dipaparkan. Piawaian HTML juga memetakan atribut tersebut kepada nisbah aspek pilihan dalam bentuk auto 1200 / 800. Piawaian HTML: atribut untuk kandungan terbenam dan imej

Bagi sumber berukuran 1200 kali 800, nisbahnya ialah 3:2. Sebaik sahaja susun atur menetapkan lebar paparan, pelayar boleh mengira tinggi berkadaran sebelum sumber selesai dimuatkan. MDN mengesyorkan supaya kedua-dua dimensi dibekalkan bersama CSS responsif untuk mengurangkan anjakan susun atur yang berkaitan dengan imej. MDN: Imej multimedia

Pembahagian tanggungjawab secara praktikal adalah mudah: HTML menerangkan dimensi sumber, manakala CSS menerangkan cara imej muat pada halaman. Pastikan kedua-dua penerangan ini selaras. Membekalkan dimensi tetap berguna walaupun imej tidak akan dipaparkan pada saiz asalnya.

Pilih sama ada imej patut memenuhi bekasnya

Gunakan fragmen CSS berikut apabila imej patut memenuhi lebar bekas yang tersedia. Fragmen ini mengandaikan imej mempunyai kelas responsive-image dan atribut dimensi yang tepat:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Jika imej patut mengecil apabila perlu tetapi mengekalkan lebar yang diisytiharkan apabila terdapat lebih banyak ruang, gunakan fragmen alternatif ini:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Corak kedua ialah pendekatan yang didokumenkan MDN untuk memastikan imej muat dalam bekas yang lebih sempit. Dalam susun atur ringkas ini, width: 100% memenuhi bekas, manakala max-width: 100% menetapkan had maksimum. Kekalkan height: auto dalam kedua-dua corak supaya tinggi boleh mengikut nisbah, bukannya kekal pada tinggi HTML. MDN: Imej multimedia

Cuba halaman imej responsif lengkap pada Mac anda

Buka TextEdit, pilih File > New, kemudian pilih Format > Make Plain Text. Tampal dokumen lengkap di bawah. Simpan sebagai shape-demo.html; jika TextEdit bertanya sambungan yang hendak digunakan, pilih Use .html. Ini ialah langkah yang didokumenkan Apple untuk mencipta fail HTML. Apple: Bekerja dengan dokumen HTML dalam TextEdit pada Mac

Dokumen ini mengandungi CSS dan SVG berkod yang menampilkan gubahan asal berbentuk bulatan dan segi empat tepat. Tiada fail atau pakej tambahan untuk dipasang. Sumber dan elemen imej masing-masing mengisytiharkan dimensi 1200 kali 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Buka fail yang disimpan dalam pelayar anda dan kecilkan lebar tetingkap. Gubahan itu patut mengecil secara berkadaran, dan Marker B patut kekal di bawahnya. Apabila tetingkap dilebarkan, gubahan itu membesar sehingga bekas contoh mencapai maksimum 900 piksel. Had maksimum itu ialah pilihan reka bentuk halaman untuk tujuan ilustrasi; ia bukan keperluan teknik penempahan ruang.

Sumber terbenam dimuatkan serta-merta, jadi contoh ini menunjukkan pensaizan responsif dan bukannya muat turun yang kelihatan tertangguh. SVG berkodnya dihuraikan dan dimensinya diperiksa dengan Python; pengiraan di bawah juga telah dilaksanakan. Pemaparan pelayar tidak dijalankan semasa penyediaan.

Untuk menyesuaikan halaman bagi sumber lain, gantikan nilai src dan kemas kini kedua-dua dimensi HTML supaya sepadan dengan sumber tersebut. Gunakan integer tanpa unit seperti 1200, bukannya 1200px, dalam atribut ini. MDN menetapkan format ini untuk dimensi imej. MDN: Elemen terbenam imej

Berapa banyak ruang patut ditempah oleh pelayar?

Bagi susun atur ringkas ini, tanpa sempadan atau pelapik pada imej, kira tinggi yang dijangka seperti berikut:

ketinggian paparan = lebar paparan × tinggi sumber ÷ lebar sumber

Dimensi contoh 1200 kali 800 memberikan hasil ilustrasi berikut. Lebar merujuk kepada kotak kandungan imej, bukannya seluruh tetingkap pelayar.

Lebar imej paparan Tinggi berkadaran
300 piksel CSS 200 piksel CSS
600 piksel CSS 400 piksel CSS
900 piksel CSS 600 piksel CSS

Pengiraan ini juga berguna untuk diagnosis. Katakan sumber sebenar berukuran 1200 kali 800, tetapi HTML tersilap mengisytiharkan 1200 kali 600. Pada lebar paparan 600 piksel, nisbah yang diisytiharkan menunjukkan tinggi 300 piksel; nisbah sebenar memerlukan 400 piksel. Ini meninggalkan potensi pembetulan 100 piksel apabila nisbah semula jadi tersedia.

Pembetulan itu berpunca daripada bahagian auto dalam petunjuk nisbah: imej dengan nisbah aspek semula jadi akan menggunakan nisbah itu sebaik sahaja tersedia. Oleh itu, atribut yang tepat tetap penting walaupun helaian gaya betul. Spesifikasi CSS mentakrifkan perbezaan ini antara nisbah yang dibekalkan dengan nisbah semula jadi elemen yang diganti. Modul Saiz Kotak CSS Tahap 4: nisbah aspek pilihan

Bilakah anda patut menggunakan aspect-ratio CSS sebagai ganti?

Gunakan nisbah CSS yang jelas apabila susun atur anda sengaja menetapkan bentuk kotak imej. Contohnya, jubin segi empat sama mempunyai keperluan yang berbeza daripada memaparkan keseluruhan gubahan 3:2 secara berkadaran.

Yang berikut ialah fragmen CSS pengganti untuk contoh lengkap ini. Gantikan peraturan .responsive-image sedia ada dengan peraturan ini:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Di sini, aspect-ratio: 1 / 1 meminta kotak segi empat sama. Lebarnya kekal responsif, dan tinggi automatik dikira berdasarkan lebar itu. Nisbah aspek pilihan memerlukan sekurang-kurangnya satu dimensi automatik untuk mempengaruhi pensaizan; menetapkan kedua-dua dimensi secara jelas menghapuskan peranan itu. MDN: aspect-ratio

Pengisytiharan object-fit: contain memastikan seluruh gubahan kelihatan di dalam segi empat sama, dengan ruang kosong pada bahagian yang tidak dipenuhi oleh bentuk dalam sumber. Menukar nilainya kepada cover memenuhi segi empat sama tetapi memotong sebahagian gubahan. Pilih tingkah laku itu dengan sengaja: pemangkasan boleh membuang bahagian imej yang bermakna. MDN: object-fit

Untuk nisbah sementara yang patut memberi laluan kepada nisbah semula jadi sumber, CSS juga menyokong nilai seperti aspect-ratio: auto 3 / 2. Nisbah kotak boleh berubah selepas pemuatan jika sumber mempunyai nisbah yang berbeza. Nisbah tanpa auto pula menyatakan bentuk pilihan susun atur. Modul Saiz Kotak CSS Tahap 4: nisbah aspek pilihan

Apakah yang patut anda periksa jika imej masih beranjak atau meregang?

Periksa sumber dan susun atur mengikut urutan ini:

  1. Sahkan kedua-dua dimensi HTML. Kedua-duanya patut menerangkan sumber dengan tepat. Lebar yang betul bersama tinggi yang salah masih membekalkan nisbah yang salah.
  2. Periksa tinggi CSS yang digunakan. Bagi contoh berkadaran, nilainya patut auto. Peraturan lain yang sepadan mungkin menetapkan tinggi tetap.
  3. Periksa lebar paparan. Pengiraan ruang yang ditempah bergantung pada lebar yang ditetapkan oleh susun atur. Mengubah saiz pelayar akan menukar lebar itu dan tinggi berkadarannya dengan sengaja.
  4. Periksa peraturan nisbah yang jelas. Nisbah segi empat sama CSS dan nisbah semula jadi 3:2 menyatakan tujuan pensaizan yang berbeza.
  5. Periksa pemadanan imej secara berasingan. contain dan cover mengawal cara sumber muat dalam kotaknya; kedua-duanya tidak membekalkan dimensi kotak yang tiada.

Pemeriksaan ini mengikuti perbezaan antara kotak elemen, nisbah pilihannya dan sumber yang dipaparkan di dalamnya. Panduan nisbah aspek MDN menerangkan cara dimensi yang jelas mempengaruhi pensaizan berkadaran, manakala rujukan object-fit menerangkan pemadanan dan pemotongan. MDN: Memahami dan menetapkan nisbah aspek, MDN: object-fit

Sokongan pelayar juga mempunyai batasan. MDN menandakan sifat CSS aspect-ratio sebagai tersedia secara meluas merentas pelayar sejak September 2021. Ini tidak membuktikan sokongan dalam setiap pelayar lama, dan tarikh itu juga bukan tarikh keserasian bagi semua tingkah laku pemetaan dimensi HTML. Semak maklumat keserasian dalam dokumentasi jika pelayar lama termasuk dalam keperluan anda. MDN: aspect-ratio

Bagi tugas imej berkadaran biasa, mulakan dengan dimensi HTML yang tepat dan CSS responsif. Gunakan nisbah CSS yang jelas apabila halaman memerlukan bentuk kotak tertentu. Pilihan ini membolehkan anda menempah ruang yang dimaksudkan sambil membiarkan saiz paparan mengikut susun atur halaman.

Sumber