How to overflow and hide css images

Method: 1. Create a div element to act as a parent container and wrap the image img tag; 2. Use the width and height attributes to set the width and height of the div element; 3. Add "overflow:hidden;" to the div element. Style, when the picture exceeds the width and height of the div, the overflowing content of the picture is trimmed and hidden.

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

How to overflow and hide css images?

Create a new html file, named test.html, to explain how div css hides the extra parts of the image.

In the test.html file, use the div tag to create a module to limit the height of the image. At the same time, set the class attribute of the div tag to jj, which is mainly used for the following Use this class to set css styles.

In the test.html file, in the div tag, use the img tag to create a picture. The picture is the 3.jpg picture under the images folder.

##In the test.html file, write the tag. The css style of the page will be written in this within the label.

In the css tag, set the css style of the div through the class name jj, use the width attribute to set the width of the div to 250px, and use the height attribute to set the height of the div to 100px .

In the css tag, set the overflow to hidden to realize that when the picture exceeds the height of the div, the hidden picture will appear part.

Open the test.html file in the browser to check the effect.

Recommended learning:

css video tutorial

The above is the detailed content of How to overflow and hide css images. For more information, please follow other related articles on the PHP Chinese website!