What are the ways for css to reduce the size of a picture

This article mainly introduces the css method to reduce the picture of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you read this css zoom out of the picture of what the method of the article will have a harvest, let's take a look at it.

Code part:

How does css change the size of a picture * {margin: 0 * padding: 0;}

It hasn't shrunk yet

Method 1:

Resize the picture by the name of the element. For example, within the css tag, use css to define that the img element within the div element has a width of 200px and a height of 100px. The code is as follows:

How does css change the size of an image div img {width: 200px; height: 100px;} * {margin: 0; padding: 0 }

After shrinking

Method 2:

Change the size of the picture by setting an id attribute to the img tag and using the id attribute in css to set the style using width (width) and height (height). The code is as follows:

How does css change the size of a picture # img-picture {margin-top: 50px; width: 200px; height: 100px;}

After shrinking

Method 3:

Change the size of the picture by setting a class attribute to the img tag and using the class attribute in css to set the style using width (width) and height (height). The code is as follows:

How does css change the image size * {margin: 0; padding: 0;} .img-picture {width: 200px Height: 100px;}

After shrinking

Method 4:

Set the width (width) and height (height) attributes by using style within the img tag. The code is as follows:

How does css change the size of a picture * {margin: 0; padding: 0;}

After shrinking

This is the end of the article on "what are the ways for css to reduce the size of the picture?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the methods of css to reduce pictures". If you want to learn more, you are welcome to follow the industry information channel.