Method: 1. Add the "transform:scale (horizontal scaling value, vertical scaling value)" style to the image element to enlarge the image; 2. Use the overflow attribute to hide the overflowing part of the image element after enlarging it. The syntax is "the parent element of the picture element {overflow:hidden;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to hide the overflow after the image is enlarged in css
In css, you can use the transform attribute to enlarge the image. When this attribute is combined with the scale function When used, the element can be scaled. The syntax is as follows:
图片元素{transform:scale(横向缩放值,竖向缩放值);}Then use the overflow attribute to hide the excess part. This attribute is used to set the style of the element beyond the element. When the attribute value is hidden, it will be hidden. elements beyond.
The syntax is as follows:
元素{overflow:hidden;}The example is as follows:
<!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>Output result:
(Learning video Share: css video tutorial)
The above is the detailed content of How to set css to hide overflow after image is enlarged. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
