Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan
Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan
- WBOYasal
- 2021-12-10 18:21:274830semak imbas
Kaedah: 1. Tambahkan gaya "transform:scale (nilai skala mendatar, nilai skala menegak)" pada elemen imej untuk membesarkan imej 2. Gunakan atribut limpahan untuk menyembunyikan bahagian imej yang melimpah elemen selepas membesarkannya. Sintaks ialah "elemen induk bagi elemen gambar {overflow:hidden;}".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk menetapkan CSS untuk menyembunyikan limpahan selepas imej dibesarkan
Dalam CSS, anda boleh menggunakan atribut transform untuk membesarkan imej. Apabila atribut ini digabungkan dengan fungsi skala Apabila digunakan, elemen boleh diskalakan Sintaksnya adalah seperti berikut:
图片元素{transform:scale(横向缩放值,竖向缩放值);} dan kemudian atribut limpahan digunakan untuk menyembunyikan bahagian yang berlebihan digunakan untuk menetapkan gaya bahagian di luar elemen Apabila nilai atribut disembunyikan, Melebihi elemen akan disembunyikan.
Sintaks adalah seperti berikut:
元素{overflow:hidden;}Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:500px;
height:300px;
border:1px solid #000;
overflow:hidden;
}
img{
transform:scale(1.5,1.5);
}
</style>
</head>
<body>
<div><img src="1118.02.png" alt=""></div>
</body>
</html>Hasil output:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!