How to make images smaller with css-CSS Tutorial-php.cn

How to make images smaller with css

WBOY

Release： 2021-11-25 16:17:01

Original

21444 people have browsed it

Method: 1. Use the width and height attributes to shrink the image, the syntax is "picture object {width: width; height: height;}"; 2. Use the "background-size" attribute to shrink the image, the syntax is " Picture object {background-size: width height;}".

How to make images smaller with css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to make images smaller in css

#1. In css, we can set the height and width of the image through the width and height attributes. Image size to achieve the purpose of reducing the image.

Let’s take a look at the example below. The example is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .img{
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <p><strong>原始图片大小</strong></p> 
        <div><img  src="1118.02.png" alt="How to make images smaller with css" ><br> 
    </div> 
        <br />
        <p><strong>通过CSS使图片缩小</strong></p> 
        <div>
            <img  src="1118.02.png" class="img" alt="How to make images smaller with css" ><br> 
        </div>
        
    </body>
</html>

Copy after login

Output result:

How to make images smaller with css

2. In css You can use the background-size attribute to achieve image reduction. Let's take a look at the example below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div{
                width: 400px;
                height: 320px;
            }
            .box1{
                background:url(1118.02.png) no-repeat;
            }
            .box2{
                background:url(1118.02.png) no-repeat;
                background-size: 200px 160px;
                
            }
        </style>
    </head>
    <body>
        <p><strong>原始图片大小</strong></p> 
        <div class="box1"></div> 
        <br />
        <p><strong>通过CSS缩小背景图片</strong></p> 
        <div class="box2"></div>
    </body>
</html>

Copy after login

Output result:

How to make images smaller with css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to make images smaller with css. For more information, please follow other related articles on the PHP Chinese website!