How to set img style attributes using CSS

In web design, the img element is a very common element, which is used to insert pictures. If you want to control the position, size, spacing, alignment and other attributes of the image, you can use CSS to set the img element. Below we will introduce how to set the CSS properties of the img element.

1. Set the image size:

1. Setting through the width and height attributes

You can set the width and height of the image through the width and height attributes of CSS Height, for example:

img{
    width: 500px;
    height: 300px;
}

2. Set by max-width and max-height attributes

If you want the image to automatically adjust according to the width of the container while maintaining the aspect ratio. To adapt to resizing, you can use the max-width and max-height attributes, for example:

img{
    max-width: 100%;
    max-height: 100%;
}

In this way, regardless of the size of the container, the image will maintain the aspect ratio and adaptively resize without deformation.

2. Set the image to be aligned in the center:

1. Horizontal center alignment

To align the image horizontally in the center, you can set the display attribute of the img element to block , and use the margin attribute to set the left and right margins to auto, for example:

img{
    display: block;
    margin: 0 auto;
}

In this way, the image will be horizontally aligned in the center.

2. Vertical center alignment

To align the image vertically in the center, you can use the flexbox layout or position attribute to set it. Taking the flexbox layout as an example, you can set the display: flex attribute to the container, and use the align-items attribute to set the vertical center alignment, for example:

.container{
    display: flex;
    align-items: center;
}
img{
    margin: 0 auto;
}

In this way, the image will be vertically aligned in the center of the container.

3. Set the margin of the image:

You can set the margin of the image through the margin and padding properties of CSS. For example:

img{
    margin: 10px;
    padding: 5px;
}

This will leave a 10 pixel margin on the outside of the image and a 5 pixel margin on the inside.

4. Set the picture shape:

If you want to change the shape of the picture, you can use the border-radius attribute to set the corner radius of the picture, for example:

img{
    border-radius: 50%;
}

Set After this attribute, the image will become circular.

5. Set the style of the parent container of the image:

If you want to set the style of the parent container of the image, you can use the CSS selector to get the parent container, for example:

<div>
    <img  src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="How to set img style attributes using CSS" >
</div>

.container{
    background-color: #f2f2f2;
    padding: 10px;
}

In this way, the parent container of the image will have a background color and inner spacing.

Summary:

After understanding how to use the above CSS properties, we can flexibly style the img element. Mastering these skills can help us better control the display effect of images in web design.

The above is the detailed content of How to set img style attributes using CSS. For more information, please follow other related articles on the PHP Chinese website!