How does the CSS implement the picture on the page with the same equal scale display zoom? Example

When we browse the page or actually work, we occasionally encounter image scaling problems. Then this article will introduce to you about the CSS picture, such as proportional scaling, such as CSS image scale display problems. Hope to be helpful to the needy friend.

CSS pictures and other proportional display specific code examples are as follows:

<! DOCTYPE html>
Effects such as:


Note: The Background-size attribute specifies the size of the background image.

Possible values:

1. Length

Sets the height and width of the background image. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".



2, percentage

Sets the width and height of the background image as a percentage of the parent element. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".



3, cover

Expand the background image to be large enough to allow the background image to completely cover the background area. Some parts of the background image may not appear in the background positioning area.



4, contain

Extend the image image to the maximum size so that its width and height are fully adapted to the content area.