How to achieve the same scaling of images on the page using css? (example)-CSS Tutorial-php.cn

How to achieve the same scaling of images on the page using css? (example)

藏色散人

Release： 2018-08-13 17:11:08

Original

6574 people have browsed it

When we browse the page or in actual work, we occasionally encounter image scaling problems. So this article will introduce to you the issue of equal scaling of css images, that is, the equal proportion display of css images. Hope it helps friends in need.

The specific code example for displaying css images in equal proportions is as follows:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css图片等比例显示代码示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }
    </style>
</head>
<body>
<div class="demo1-1">
    <div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>

Copy after login

The effect is as follows:

How to achieve the same scaling of images on the page using css? (example)

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

Possible values:

1, length

Set the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is set, the second value will be set to "auto".

2. Percentage

Set 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 only one value is set, the second value will be set to "auto".

3. cover

Expand the background image to a large enough size so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background anchor area.

4. contain

Expand the image to its maximum size so that its width and height fully fit into the content area.

The above is the specific introduction to the proportional scaling display of css images. It has certain reference value and can be used for reference.

The above is the detailed content of How to achieve the same scaling of images on the page using css? (example). For more information, please follow other related articles on the PHP Chinese website!