HTML 5 gambar layar adaptif img kode skala proporsional untuk halaman web HTML XNUMX

Karena booming Internet seluler,Pemasaran WeChatPopularitas ponsel telah menjadiHidupalat yang harus dimiliki.

membangun situs webtemplate, disarankan untuk menggunakanWordPressTema adaptif untuk:

Apa yang dimaksud dengan adaptif gambar CSS?

Penyesuaian diri gambar CSS mengacu pada pembuatan gambar di halaman web html, melalui kode CSS:

Lanjut,Chen WeiliangSaya akan membagikan kepada Anda kode penskalaan proporsional img CSS ^_^

Kode adaptif tinggi dan lebar gambar CSS

Sisipkan gambar dalam html:

Jika Anda ingin gambar beradaptasi dengan ukuran layar yang kecil alih-alih tetap lebar dan tinggi.

Anda dapat menambahkan kode berikut ke file style.css dari tema WordPress Anda

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

pernyataan disinimax-widthaturan lebar maksimum

• untuk memastikan bahwa semua gambar ditampilkan maksimal 100% (yaitu hanya dapat ditampilkan sebesar gambar mereka sendiri).
• Pada titik ini, jika elemen yang berisi gambar (misalnya, badan atau div yang berisi gambar) lebih kecil dari lebar bawaan gambar, gambar akan diskalakan untuk memenuhi ruang maksimum yang tersedia.

width:auto;berarti lebar otomatis

\9 Ini adalah cara menulis hack css.

• Dengan cara ini, "\9" ditambahkan ke kode css normal, hanya browser IE yang dapat mengenalinya, browser lain akan mengabaikan pernyataan ini.
• Ini akan mencapai diferensiasi browser, memungkinkan tujuan browser yang kompatibel.

Mengapa tidak menggunakan lebar: 100%?

Untuk mencapai penskalaan gambar secara otomatis, Anda juga dapat menggunakan properti lebar yang lebih umum digunakan, mis.width：100％.

Namun, aturan ini tidak berlaku di sini.

• Karena aturan ini akan membuatnya tampil selebar wadahnya.
• Dalam kasus di mana wadah jauh lebih lebar dari gambar, gambar tidak perlu diregangkan.

注意 事项

Apa itu pemilih CSS? Apa perbedaan antara kelas dan id?Tutorial berikut berbicara tentang

Apa perbedaan antara kelas dan id pemilih CSS? id dan penggunaan kelas dalam HTML

Apa perbedaan antara kelas dan id pemilih CSS? Penggunaan id dan kelas dalam HTML Chen Weiliang saat ini melakukan SEO dan mengoptimalkan tema WordPress situs web.Meskipun saya telah mempelajari beberapa pengetahuan dasar HTML dan CSS sebelumnya, tetapi saya sudah lama tidak mengoperasikannya, terutama bagian CSS ...

Bagaimana cara mengadaptasi halaman untuk memutar video MP4 di situs web seluler?Silahkan klik link dibawah ini

Bagaimana halaman web H5 MP4 beradaptasi dengan halaman? Situs web seluler memutar kode html video

Pemasaran video merupakan bagian integral dari pemasaran online: banyak praktisi promosi online sering menggunakan video yang dikombinasikan dengan "pemasaran viral" untuk mengarahkan lalu lintas.Jika pemasaran WeChat digabungkan dengan pemasaran video, itu dapat lebih meningkatkan tingkat konversi copywriting media baru dan e-commerce sosial.Saya mempunyai banyak teman...