Heim >Web-Frontend >CSS-Tutorial >So stellen Sie CSS so ein, dass der Überlauf ausgeblendet wird, nachdem das Bild vergrößert wurde
So stellen Sie CSS so ein, dass der Überlauf ausgeblendet wird, nachdem das Bild vergrößert wurde
- WBOYOriginal
- 2021-12-10 18:21:274858Durchsuche
Methode: 1. Fügen Sie dem Bildelement den Stil „transform:scale (horizontaler Skalierungswert, vertikaler Skalierungswert)“ hinzu. 2. Verwenden Sie das Überlaufattribut, um den überlaufenden Teil des Bildelements nach der Vergrößerung auszublenden . Die Syntax lautet „image Das übergeordnete Element des Elements {overflow:hidden;}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie das CSS so ein, dass der Überlauf ausgeblendet wird, nachdem das Bild vergrößert wurde.
In CSS können Sie das Transformationsattribut verwenden, um das Bild zu vergrößern. Wenn dieses Attribut in Verbindung mit der Skalierungsfunktion verwendet wird, ist das Element Die Syntax lautet wie folgt:
图片元素{transform:scale(横向缩放值,竖向缩放值);} Dann wird der überschüssige Teil über das Überlaufattribut ausgeblendet, mit dem der Stil des überschüssigen Elements festgelegt wird.
Die Syntax lautet wie folgt:
元素{overflow:hidden;}Das Beispiel lautet wie folgt:
<!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>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo stellen Sie CSS so ein, dass der Überlauf ausgeblendet wird, nachdem das Bild vergrößert wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!