First, picture size

In CSS, the image size is controlled by height and width, but in practical development, the size of the image needs to be as large as the image generated by PHOTOSHOP. It is not recommended to use a large image, and then use height and width to change its size, because the size of a large image is large. Slow down page loading.

Second, picture border

As with the border of an element, the border of an image is set with the border attribute, using abbreviations in practice.

Third, picture alignment

1. Align horizontally

Use the text-align attribute to align the image horizontally. Values are left, center, and right (define the alignment in the parent element of the image label).

2. Align vertically

Use the vertical-align attribute to define the vertical position of the surrounding inline elements or text to that element. This can be tricky to understand, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            img{
                height: 100px;
                width: 100px;
            }
            #img1{
                vertical-align: top;
            }
            #img2{
                vertical-align: middle;
            }
            #img3{
                vertical-align: baseline;
            }
            #img4{
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>At the top of the alignment<img id="img1" src="img.jpg" alt=""/>Top aligned top<hr/>The central alignment<img id="img2" src="img.jpg" alt=""/>Middle aligned middle<hr/>Baseline alignment<img id="img3" src="img.jpg" alt=""/>Base alignment<hr/>At the bottom of the alignment<img id="img4" src="img.jpg" alt=""/>Bottom align bottom<hr/>
    </body>
</html>
Copy the code

How it looks in the browser:

The vertical-align attribute values are as follows:

Attribute values instructions example
top At the top of the alignment Align the picture with the top of the text
middle The central alignment Align the image with the middle of the text
baseline Baseline alignment The base line of the picture is the bottom, and the base line of the text is the position of the third line of the four-line and three-grid writing method, that is, the bottom of such letters as A, O, and U
bottom At the bottom of the alignment Align the picture with the bottom of the text

Four, text surround

You can use the float property to wrap text around an image, either left or right, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 300px;
            }
            img{
                height: 100px;
                width: 100px;
            }
            .p_left{
                float: left;
            }
            .p_right{
                float: right;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img.jpg" alt="" class="p_left">
            <p>Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;Image left float&nbsp;</p>
        </div>
        <hr/>
        <div>
            <img src="img.jpg" alt="" class="p_right">
            <p>Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;Image right float&nbsp;</p>
        </div>
    </body>
</html>
Copy the code

The following information is displayed in the browser:

4. How to use vertical-align to achieve center alignment of pictures

There is the following code:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                text-align: center;
                vertical-align: middle;
                display: table-cell;
                border: black 1px solid;
            }
            img{
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img.jpg" alt="">
        </div>
    </body>
</html>
Copy the code

As you can see, the image is centered vertically inside the div:

Points to ponder:

  • Why use itdisplay:table-cell? Because vertical-align is valid only for inline elements, setting its display attribute to table-cell actually converts block elements into cells. You can set width and height, or use vertical center attributes.
  • Since the vertical-align attribute is valid for inline elements, can div be replaced with span? No, because elements in a row cannot be set to width and height, the span will not be split. To split a span, you must convert it to a block element, and block elements cannot use the vertical-align attribute…
  • Is there any other way to center an image vertically? B: Yes, I’ll do it next time.