img元素

使用 img 元素时，可以使用边框（ border）、大小（width、height）、横向对齐（设置父元素的text-align）、纵向对齐（vertical-align）、文字环绕（float）等一些效果。

当只设置图片的宽或高时，图片整体大小会等比例自动修改。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .wrapper {
                text-align: center;
            }

            .imgItem {
                width: 100px; /*只设置宽度时，高度会等比例自动调整*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img class="imgItem" src="../img/1.jpg" alt="" />
        </div>
    </body>
</html>

img 是行内元素（line），当和其他行内元素（如包含在 span 内的文字）在同一行时，有时需要调整 img 的位置，从而使得图片和文字的位置和谐一些，可以配置 img 为相对定位，然后再进行 img 位置的微调整。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .imgItem {
                width: 1rem; /*只设置宽度时，高度会等比例自动调整*/
                position: relative;
                top: 2px; /*微调top值，使img到达理想位置*/
            }
        </style>
    </head>
    <body>
        <img class="imgItem" src="../img/1.jpg" alt="" />我是文字
    </body>
</html>

背景图

background-size 设置背景图片大小。

1、值为 contain

缩放背景，将图片完全装入背景区（保持图片宽高比例），背景区有可能会出现空白。

2、值为 cover

缩放背景，使其完全覆盖背景区（保持图片的宽高比），当背景图和背景区大小不同时，背景图有些部分会被裁剪掉

3、值为宽度和高度

如果只设置一个值，则该值为宽度，高度值为 auto

如果设置两个值，则第一个为宽度，第二个为高度

当设定多个图片时，需要提供多个值，通过逗号分隔

1	background-size: 50% 25%, contain, 3em;

DaMeng

css 图片样式

img元素

背景图