How does css make the picture smaller?

This article introduces the knowledge of "how to make the picture smaller by css". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Methods: 1, the use of width and height attributes to reduce the picture, syntax "picture object {width: width; height: height;}"; 2, the use of "background-size" attribute to reduce the picture, syntax "picture object {background-size: width height;}".

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

How to make a picture smaller by css

1. In css, we can set the size of the picture by setting the height and width of the picture by setting the width and height properties to achieve the purpose of shrinking the picture.

Let's take a look at it through an example, which is as follows:

.img {width: 200px; height: 100px;}

Original picture size

Reduce the size of the picture through CSS

Output result:

2. You can use the background-size attribute in css to reduce the size of the image. Let's take a look at it through an example:

Div {width: 400px; height: 320px;} .box1 {background:url (1118.02.png) no-repeat;} .box2 {background:url (1118.02.png) no-repeat; background-size: 200px 160px;}

Original picture size

Zoom out the background picture through CSS

Output result:

This is the end of the content of "how to make a picture smaller by css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!