masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencapai Gelagat `saiz latar belakang: penutup` CSS dengan Elemen Imej HTML?

Bagaimanakah Saya Boleh Mencapai Gelagat `saiz latar belakang: penutup` CSS dengan Elemen Imej HTML?

Patricia Arquette

Lepaskan： 2024-12-17 19:46:13

asal

799 orang telah melayarinya

How Can I Achieve CSS `background-size: cover` Behavior with HTML Image Elements?

Meliputi dan Mengandungi Imej dengan Elemen HTML

Saiz latar belakang CSS: penutup dan mengandungi sifat menyediakan penskalaan imej yang fleksibel untuk latar belakang. Walau bagaimanapun, bagaimana jika anda mahukan kawalan serupa ke atas imej yang dipaparkan menggunakan elemen HTML? Begini caranya:

Penyelesaian 1: Harta muat objek

Sifat muat objek membolehkan anda menentukan cara imej muat dalam bekasnya. Menetapkannya kepada penutup mereplikasi gelagat saiz latar belakang: penutup, menskalakan imej untuk mengisi keseluruhan bekas sambil mengekalkan nisbah bidang.

img {
  object-fit: cover;
}

Salin selepas log masuk

Nota: IE tidak menyokong objek -sesuai.

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

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Menambah Imej Latar Belakang pada Kalangan SVG? Artikel seterusnya：Em vs. Px: Bilakah Saya Perlu Menggunakan Setiap Unit CSS untuk Reka Bentuk Optimum?

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2214

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2363

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1975

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...