How to reduce the content of the picture by half by css

This article mainly introduces how css reduces the content of the picture by half, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let's take a look at it.

Css reduces the content of the picture by half: 1, place the picture element in a div element; 2, use width and height attributes to set the size of the div element to half of the picture element; 3, add a "overflow:hidden;" style to the div element to hide the picture element beyond the div.

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

We can first put the picture into the div element and set the size of the div element to the same size as the picture. In this case, set the size of the div element to half the size through the width element or the height element, and hide the elements that exceed the div size through the overflow element. At this time, the content of the screen can be reduced by half.

Examples are as follows:

.div1 {width:194px; height:249px; overflow:hidden;}

Output result:

Thank you for reading this article carefully. I hope the article "how to reduce the picture content by half" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!