Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Memasukkan Imej Latar Belakang kepada Div Tanpa Memangkas?

Bagaimanakah Saya Boleh Memasukkan Imej Latar Belakang kepada Div Tanpa Memangkas?

DDD
Lepaskan: 2024-12-18 18:12:11
asal
643 orang telah melayarinya

How Can I Fit a Background Image to a Div Without Cropping?

Memasang Imej Latar Belakang pada Div

Untuk memaparkan imej latar belakang dalam div tanpa memangkasnya, gunakan sifat bersaiz latar belakang. Bergantung pada hasil yang anda inginkan, anda boleh memilih untuk menskalakan imej agar muat dalam div atau menutup keseluruhan div.

Menskalakan Imej Latar Belakang agar Sesuai dengan Div

Jika anda ingin menskalakan imej latar belakang supaya ia kekal kelihatan sepenuhnya dalam div, tetapkan sifat saiz latar belakang kepada mengandungi.

background-size: contain;
Salin selepas log masuk

Menskalakan Imej Latar Belakang untuk Meliputi Div

Sebagai alternatif, jika anda mahu imej latar belakang meliputi keseluruhan div, gunakan saiz latar belakang harta ditetapkan kepada penutup.

background-size: cover;
Salin selepas log masuk

Contoh

Di bawah ialah beberapa contoh untuk menggambarkan kesan tetapan ini:

<div>
Salin selepas log masuk
  • Dengan latar belakang -saiz: mengandungi;, imej akan dikecilkan untuk dimuatkan dalam div, mengekalkan aspeknya nisbah.
  • Dengan saiz latar belakang: penutup;, imej akan diregangkan untuk menutupi keseluruhan div, berpotensi memesongkan nisbah bidangnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memasukkan Imej Latar Belakang kepada Div Tanpa Memangkas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan