Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan-tutorial css-php.cn

Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan

WBOY

Lepaskan： 2021-12-10 18:21:27

asal

4831 orang telah melayarinya

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;}".

Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan

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(横向缩放值,竖向缩放值);}

Salin selepas log masuk

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;}

Salin selepas log masuk

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>

Salin selepas log masuk

Hasil output:

Bagaimana untuk menetapkan css untuk menyembunyikan limpahan selepas imej dibesarkan

(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!