Shulou(Shulou.com)06/02 Report--

This article mainly introduces "css how to set the picture to enlarge and hide the overflow". In the daily operation, I believe many people have doubts about how to set up the css to hide the overflow after the picture is enlarged. The editor consulted all kinds of information and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the doubt of "how to set the picture to enlarge after the css to hide the overflow". Next, please follow the editor to study!

Method: 1, add "transform:scale (horizontal scaling value, vertical scaling value)" style to the picture element to enlarge the picture; 2, use the overflow attribute to hide the overflow part of the picture element after magnification, and the syntax is "the parent element of the picture element {overflow:hidden;}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to set css to hide overflow after enlarged image

In css, you can use the transform attribute to enlarge the image. When this attribute is used with the scale function, the element can be scaled. The syntax is as follows:

Picture element {transform:scale (horizontal scaling value, vertical scaling value);}

The excess is then hidden through the overflow attribute, which is used to style the part beyond the element, and when the attribute value is hidden, the excess element is hidden.

The syntax is as follows:

Element {overflow:hidden;}

Examples are as follows:

Document div {width:500px; height:300px; border:1px solid # 000; overflow:hidden;} img {transform:scale (1.5);}

Output result:

At this point, on the "css how to set the picture enlarged after the hidden overflow" study is over, I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.