cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css

Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css

WBOY
WBOYasal
2021-12-01 16:05:203610semak imbas

Kaedah css untuk mengurangkan separuh kandungan skrin: 1. Letakkan elemen skrin dalam elemen div 2. Gunakan atribut lebar dan ketinggian untuk menetapkan saiz elemen div kepada separuh daripada elemen skrin; 3. Berikan div Hanya tambah gaya "overflow:hidden;" pada elemen untuk menyembunyikan elemen skrin di luar div.

Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara mengurangkan separuh kandungan skrin dengan css

Kita boleh mula-mula meletakkan skrin ke dalam elemen div dan menetapkan saiz elemen div ke skrin Pada masa ini, tetapkan saiz elemen div kepada separuh saiz melalui elemen lebar atau elemen ketinggian, dan sembunyikan elemen yang melebihi saiz div melalui elemen limpahan Pada masa ini, kandungan skrin boleh dikurangkan separuh.

Contohnya adalah seperti berikut: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        .div1{
            width:194px;
            height:249px;
            overflow:hidden;
            }
        </style>
    </head>
    <body>
    <div class="div1">
<img  src="1118.02.png"/ alt="Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css" >
</div>
<img  src="1118.02.png"/ alt="Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css" >
    </body>
</html>

Hasil output:

Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan css

(Perkongsian video pembelajaran: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mengurangkan kandungan skrin sebanyak separuh dengan 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
Artikel sebelumnya：Bagaimana untuk mengalih keluar semua sempadan kotak teks dalam cssArtikel seterusnya：Bagaimana untuk mengalih keluar semua sempadan kotak teks dalam css

Artikel berkaitan

Lihat lagi