Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai Kesan `saiz latar belakang: penutup` dan `saiz latar belakang: mengandungi` pada Elemen Imej Menggunakan CSS?

Bagaimanakah Saya Boleh Mencapai Kesan `saiz latar belakang: penutup` dan `saiz latar belakang: mengandungi` pada Elemen Imej Menggunakan CSS?

Susan Sarandon
Susan Sarandonasal
2024-12-14 10:26:11407semak imbas

How Can I Achieve `background-size: cover` and `background-size: contain` Effects on Image Elements Using CSS?

Melaksanakan Sifat Saiz Latar Belakang untuk Elemen Imej

CSS moden menyediakan cara untuk memaparkan imej dalam cara yang serupa dengan saiz latar belakang: penutup dan saiz latar belakang: mengandungi sifat untuk imej latar belakang.

Penyelesaian 1: sesuai dengan objek Harta

Untuk penyemak imbas dengan sokongan muat objek, sifat ini membenarkan replikasi lancar gelagat saiz latar belakang pada elemen imej. Hanya tambahkan CSS berikut pada imej anda:

body {
  margin: 0;
}

img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Kesan `saiz latar belakang: penutup` dan `saiz latar belakang: mengandungi` pada Elemen Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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