How to set img image in css

CSS styles are used to control the presentation of web page elements, including text, images, colors, layout, etc. When you want to set an image on a web page, you need to use CSS to control the size, position, border, background and other attributes of the image. Today we will explain how to use CSS to set img images.

1. Set the image size

You can use the width and height attributes to set the image size in CSS. For example, to set the width of an image to 200 pixels and the height to 150 pixels, you would write:

img {
  width: 200px;
  height: 150px;
}

This will make all img tags 200x150 pixels in size.

If only one of the properties is set, the image will maintain its original scaling. For example:

img {
  width: 200px;
}

This will make the width of the image 200 pixels and the height will be scaled proportionally.

2. Set the picture border

You can use the border attribute to set the picture border in CSS. For example, to set the border of an image to red and 2 pixels wide, you can write:

img {
  border: 2px solid red;
}

This will add a red border to all img tags with a width of 2 pixels. The effect is as shown below:

3. Set the rounded corners of the image

You can use the border-radius attribute to set the rounded corners of the image in CSS. For example, to set the four corners of an image to have rounded corners with a radius of 10 pixels, you can write:

img {
  border-radius: 10px;
}

This will make the four corners of all img tags rounded.

If you want to set only a certain corner to a rounded corner, you can write like this:

img {
  border-top-left-radius: 10px;
}

This will make the upper left corner rounded and the other corners will remain right angles.

4. Set the image background

You can use the background attribute to set the image background in CSS. For example, to change the background of an image to gray, you can write:

img {
  background: gray;
}

This will make the background of all img tags gray.

If you only want to change the background color of the middle part of the picture border, you can use the background-color attribute together with the border attribute. For example:

img {
  border: 2px solid red;
  background-color: gray;
}

This will change the background color in the middle of the picture border to gray.

5. Set the image position

You can use the margin and padding attributes to set the image position in CSS. For example, to set the margin of an image to 20 pixels, you would write:

img {
  margin: 20px;
}

This will make all img tags 20 pixels from their surroundings.

If you want to change the spacing between the image and surrounding elements, you can use the padding attribute. For example, to set the padding of an image to 10 pixels, you would write:

img {
  padding: 10px;
}

This will keep all img tags 10 pixels away from surrounding elements.

To sum up, we can control images in web pages through CSS styles, including size, position, border, background and other attributes. Setting image styles can make web pages more beautiful and easier for readers to read.

The above is the detailed content of How to set img image in css. For more information, please follow other related articles on the PHP Chinese website!