This is the 26th day of my participation in the August Text Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 24th article in the “Learn front End from Scratch” series on Images and Background Images in HTML and CSS.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article we are going to look at images in HTML and CSS, as shown below:

<img>Image elements

HTML provides the element, which is an empty element, to represent an image on a page. Use the SRC attribute to introduce the path of an image, which can be either relative or absolute.

Tips for relative and absolute paths refer to relative and absolute paths

The following code example uses the element:

<body>
    <img src=". /.. /image/4.jpg" />
</body>
Copy the code

The code running result is as follows:

The common attributes of the element are as follows:

  • SRC: Indicates the address of the image. This attribute is required.

  • Alt: Used to define the alternate text that describes the image. The value of this property is displayed when the browser cannot display the specified image properly. This property is optional, but there is a difference between having no property and having a null property value. Without the Alt attribute, the image is a key part of the content; Null indicates that the image is not a critical part of the content and will be ignored by non-visual browsers when rendering.

  • Title: Text content that is displayed when the mouse hovers over the image.

The HTML standard does not specify which image formats the element supports, or which image formats must be supported. Therefore, different browsers may support different image formats. The supported image formats include JPEG, GIF, PNG, APNG, SVG, BMP, BMP ICO, and PNG ICO.

It is important to note that, technically speaking, the element does not embed an image into the HTML page, but merely placeholders the HTML page and specifies the path to the image file. So, when the browser loads the parsed HTML page, it loads the image file separately. As shown below:

Specifies the width and height for the image

It is easy to specify the width and height of elements. There are two ways to specify the width and height of elements. There is also a way to achieve through CSS, generally is the use of CSS to control. Note that the aspect ratio must be consistent with the aspect ratio of the original image, otherwise the image will be stretched.

The following code shows specifying the width and height for the element:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Specify width and height for IMG</title>
        <style>
            .image {
                /* If you specify only one side, the other side will scale automatically */
                width: 500px;
            }
        </style>
    </head>
    <body>
        <! -- Specifying width and height will stretch the image if it is not saved -->
        <img width="500px" height="300px" src=". /.. /image/4.jpg" alt="Sister Rong Rong" />
        <img class="image" src=". /.. /image/4.jpg" alt="Two Bosses" />
    </body>
</html>

Copy the code

The code running result is as follows:

In the code above, we specify both width and height for the first , and the ratio of width to height does not match the original image, resulting in the final image being stretched.

Substitutable elements and non-substitutable elements

Replaced elements are also called replaceable elements. Their appearance is not controlled by CSS. These elements are external objects and their appearance is rendered independently of CSS.

Non-replacement elements are also called non-replacement elements. Their contents are rendered directly to the client by CSS.

Replaceable element

A CSS rendering model does not take into account the rendering of this content, and the element itself generally has a fixed size. For example, the default size of elements is the size of the image. Such elements are called replaceable elements. For replaceable elements, the browser determines what to display based on the element’s tags and attributes, such as the width and height attributes of the element.

  • The content of the replaceable element is not affected by the style of the current document. CSS can affect the position of the replaceable element, but not the content of the replaceable element itself.

  • For example, the browser reads and displays the image based on the SRC value of the tag. The content of the image is determined by SRC, and CSS does not consider rendering the content of the image.

  • Common substitutable elements in the CSS include

Nonsubstitutive element

Non-replacement elements are elements whose content is contained in the document and whose content can be controlled by CSS rendering.

  • The contents of non-replacement elements are not outside the scope of the CSS model, and CSS takes the contents of non-replacement elements into account when rendering.

  • Most elements of HTML are non-replaceable, meaning that their contents are rendered directly to the browser, such as

    ,

    ,

    ~

    ,
    , and so on.

CSS provides properties that control replaceable elements

Due to the nature of replaceable elements, CSS provides two properties that control where or how content objects contained in an replaceable element are positioned within the element’s box area.

Object – fit attributes

The object-fit property provided by CSS specifies how the content object of the replaceable element is filled in the element box area. The attribute values for this element are as follows:

  • Contain: This property will scale the content to contain the original scale. If the container height to width ratio does not match, the mismatch area will have no content

  • Cover: This property scales the replacement content equally to the container size, and the content will be trimmed

  • Fill: This property will stretch the replacement content to the size of the container and the content will be distorted

  • None: the original size

  • Scale-down: has the same effect as None or contain, depending on which one ends up smaller.

The following code shows the use of the object-fit attribute:

The HTML structure is as follows:

<body>
    <div>
        <h5>contain</h5>
        <img class="contain" src=".. /image/2.jpg" />
    </div>
    <div>
        <h5>cover</h5>
        <img class="cover" src=".. /image/2.jpg" />
    </div>
    <div>
        <h5>fill</h5>
        <img class="fill" src=".. /image/2.jpg" />
    </div>
    <div>
        <h5>none</h5>
        <img class="none" src=".. /image/2.jpg" />
    </div>
    <div>
        <h5>scale-down</h5>
        <img class="scale-down" src=".. /image/2.jpg" />
    </div>
</body>
Copy the code

The CSS code is as follows:

body { margin: 0; padding: 0 20px; }
div { float: left; margin-right: 24px; }
img {
    width: 320px;
    height: 180px;
    border: 1px solid # 000;
}
/* Adaptive effect */
.contain { object-fit: contain; }
/* Fill effect */
.cover { object-fit: cover; }
/* Stretch effect */
.fill { object-fit: fill; }
/* Original effect */
.none { object-fit: none; }
/* Fit either of two fillings */
.scale-down { object-fit: scale-down; }
Copy the code

The code looks like this:

Object – position attribute

The object-position provided by the CSS specifies the position of the content object of the replaceable element in the element box area. This attribute can accept two values or one value, which we’ll discuss separately:

  • When receiving a value for length, percentage, or center, it represents both a horizontal and vertical position. If the value is left or right, it indicates the horizontal direction. If the value is top, bottom, this value represents the vertical direction

  • The first value represents the horizontal direction and can be left, center, right, and length or percentage. The second value represents the vertical direction and can receive values such as top, center, bottom, and length values or percentages.

The following code shows the use of the object-position attribute:

The HTML structure is as follows:

<body>
    <div>
        <img class="length" src=".. /image/2.jpg" />
    </div>
    <div>
        <img class="left" src=".. /image/2.jpg" />
    </div>
    <div>
        <img class="center" src=".. /image/2.jpg" />
    </div>
    <div>
        <img class="top" src=".. /image/2.jpg" />
    </div>
</body>
Copy the code

The CSS code is as follows:

body {
    margin: 0;
    padding: 20px;
}
div {
    float: left;
    margin-right: 24px;
}
img {
    width: 320px;
    height: 120px;
    border: 1px solid # 000;
    object-fit: contain;
}
.length {
    object-position: 10px;
}
.left {
    object-position: left;
}
.center {
    object-position: center;
}
.top {
    object-position: top;
    height: 500px;
}
Copy the code

The code looks like this:

The background image

The background image in CSS mainly refers to the content related to the background property, which is actually a shorthand property, and its properties can be divided into the following:

  • Background – the image attributes

  • Background – repeat attributes

  • Background – position attribute

  • Background – the size attribute

The background image

Use the background-image attribute to introduce one or more background images through the URL () function, which takes the path of the image and splits multiple images using commas.

The following code shows the use of the background-image attribute:

body {
    background-image: url('. /.. /image/2.jpg');
}
Copy the code

The code run result is as follows:

Tile way

The background-repeat property is used to set how the background image is repeated. The background image can be repeated horizontally, vertically, or biaxial with or without repetition. This property has four values, as follows:

  • Repeat: The image is repeated in both horizontal and vertical directions. If the last image is not fully displayed, it will be clipped.

  • No-repeat: The image does not repeat in both horizontal and vertical directions.

  • Space: The image is repeated in both horizontal and vertical directions. The first and last repeating images are fixed to the edges of the elements, while the white space is evenly distributed between the repeating images.

  • Round: As the browser window grows in size, duplicate images are stretched (with no space between duplicate images) to fill the entire browser window.

Since background-repeat property is divided into horizontal and vertical repeat, the value of this property is two:

  • The first value: indicates whether the horizontal image is repeated. You can use one of the four values above.

  • Second value: indicates whether the vertical image is repeated. You can use one of the four values above.

Of course, the background-repeat property can also be set with a single value, as follows:

Single value This is equivalent to a double value
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

The following code shows the use of the background-repeat attribute

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Tile way</title>
        <style>
            div {
                background-image: url('.. /image/icon.png');
                width: 144px;
                height: 84px;
            }

            .no-repeat { background-repeat: no-repeat; }

            .repeat { background-repeat: repeat; }

            .repeat-x { background-repeat: repeat-x; }

            .repeat-y { background-repeat: repeat-y; }
        </style>
    </head>
    <body>
        <p>no-repeat</p>
        <div class="no-repeat">&nbsp;</div>
        <p>repeat</p>
        <div class="repeat">&nbsp;</div>
        <p>repeat-x</p>
        <div class="repeat-x">&nbsp;</div>
        <p>repeat-y</p>
        <div class="repeat-y">&nbsp;</div>
    </body>
</html>

Copy the code

The code run result is as follows:

Image location

The background-position property provided by the CSS is used to set the position of the background image. Its value and usage mode are the same as the Object-positon property, which will not be described here.

Image size

The background-size property provided by CSS is used to set the size of the background image displayed on the HTML page. This property has four types of values, as follows:

  • Cover: Zoom the background image to completely cover the background area. Part of the background may not be visible.

  • Contain: Scale the background image to fully contain the background area, the background area may be partially blank.

  • One value: sets the width of the background image to this value and the height to auto.

  • Two values: the first value indicates the width of the background image, and the second value indicates the height of the background image.

Background-size attributes are similar to object-fit attributes, so I won’t show you the code here.

conclusion

Preview: In the next article we’ll look at lists in HTML and how to style them