HTML和CSS中的图像与背景图像_html img css图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_46163658/article/details/119945212

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十四篇-《HTML和CSS中的图像与背景图像》

编写不易转载请获得允许

写在前面

本篇文章我们将来学习HTML和CSS中图像的相关内容，本篇文章会涉及到的内容如下图所示：

图像(导读).png

`<img>`图像元素

HTML提供<img>元素用于在页面中表示一个图像，该元素为一个空元素。使用src属性来引入一张图片的路径，这个路径既可以是相对路径也可以是绝对路径。

tips：关于相对路径和绝对路径可参考相对路径和绝对路径

如下代码示例的<img>元素的用法：

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

代码运行结果如下图所示：

01_img元素.png

<img>元素常用的属性如下所示：

src：表示图片的地址，这个属性是必须的。
alt：用来定义了描述图像的替换文本。当浏览器无法正常显示指定图片时，会显示该属性值的内容。这个属性是可选的，但是没有这个属性和属性值为空时存在区别的。当不具备alt属性时，图像是该内容的关键部分；当为空时说明该图像不是内容的关键部分，非可视化浏览器在渲染的时候将会忽略。
title：鼠标悬停在图像上时所显示的文本内容。

HTML 标准并没有规定<img>元素所支持的图像格式，或者必须支持的图像格式。所以不同浏览器所支持的图像格式可能会不相同。大概支持的图像格式有JPEG、GIF、PNG、APNG、SVG、BMP、BMP ICO和PNG ICO格式。

值得注意的是，从技术角度来说，<img>元素并没有将一张图像嵌入到HTML页面中，只是在HTML页面进行占位并指定了该图像文件的路径而已。所以，浏览器在加载解析HTML页面时，会单独加载图像文件。如下图所示：

02_图像的加载.png

为图像指定宽高

为<img>元素指定宽高比较容易，有两种方式，第一种通过<img>提供的属性即width和height；还有一种就是通过CSS的方式来实现，一般都是使用CSS的方式来控制。需要注意的是 ，高宽比一定要与原图像的高宽比保持一致，否则该图像会被拉伸。

如下代码展示了为<img>元素指定宽高：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>为img指定宽高</title>
        <style>
            .image {
                /* 如果仅仅指定一边，另一半会按照比例自动缩放 */
                width: 500px;
            }
        </style>
    </head>
    <body>
        <!-- 同时指定宽高如果不和图片保存一直将会拉伸图片 -->
        <img width="500px" height="300px" src="./../image/4.jpg" alt="蓉蓉姐" />
        <img class="image" src="./../image/4.jpg" alt="二老板" />
    </body>
</html>

代码运行结果如下图所示：

02_指定img宽高.png

在上面的代码中，我们为第一个<img>同时指定宽度和高度，且宽高之比与原图像不符，导致最终的图片被拉伸。

可替换元素与非替换元素

可替换元素 又称可置换元素 英文为replaced element，其展现效果不是由CSS控制的 ，这些元素是一种外部对象，它们外观的渲染，是独立于CSS的。

非替换元素 又称非置换元素 英文non-replaced element，其内容由CSS渲染直接表现给客户端 。

可替换元素

一个不收CSS渲染控制，CSS渲染模型并不会考虑对此内容的渲染，且元素本身一般情况下拥有固定的尺寸，例如<img>元素的默认尺寸就是图片的尺寸，这样的元素称为可替换元素 。对于可替换元素，浏览器会根据元素的标签和属性，例如<img>元素的width和height属性，来决定元素的具体显示内容。

可替换元素的内容不受当前文档的样式的影响，CSS可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
举个例子，浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，图片的内容由src决定，CSS并不考虑对图片的内容进行渲染。
CSS中常见的可替换元素，除<img>外该有<iframe>、<video>、<embed>等。有些元素在特定情况下会被当作可替换元素处理，例如<option>、<audio>、<canvas>、<object>、<applet>、<input>等。

非替换元素

非替换元素是其内容包含在文档中的元素，其内容可以受CSS渲染控制。

非替换元素的内容不会超出CSS的模型范围，CSS在渲染时会考虑非替换元素的内容。
HTML的大多数元素是不可替换元素，即其内容直接表现给浏览器，例如<div>、<p>、<h1>~<h6>、<table>等等等等。

CSS提供的控制可替换元素的属性

介于可替换元素的特性，CSS提供了两个属性可以控制可替换元素中包含的内容对象在该元素的盒区域内的位置或定位方式。

object-fit属性

CSS提供的object-fit属性指定可替换元素的内容对象在元素盒区域中的填充方式。该元素的属性值如下所示：

contain：该属性会将被替换内容的等比例缩放，保存原比例。如果容器高宽比例不符，不匹配区域将没有内容
cover：该属性会将替换内容等比例缩放至容器大小，内容将会被裁减
fill：该属性会拉伸替换内容至容器大小，内容将会被扭曲
none：原始尺寸
scale-down：与none和contain其中一个的效果相同，这取决于两者那个最终的尺寸更小。

如下代码展示了object-fit属性的用法：

HTML结构如下：

<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>

CSS代码如下：

body { margin: 0; padding: 0 20px; }
div { float: left; margin-right: 24px; }
img {
    width: 320px;
    height: 180px;
    border: 1px solid #000;
}
/* 适应效果 */
.contain { object-fit: contain; }
/* 填充效果 */
.cover { object-fit: cover; }
/* 拉伸效果 */
.fill { object-fit: fill; }
/* 原始效果 */
.none { object-fit: none; }
/* 适应填充二选一 */
.scale-down { object-fit: scale-down; }

代码的运行结果如下图所示：

03_object-fit属性.png

object-position属性

CSS提供的object-position指定可替换元素的内容对象在元素盒区域中的位置。该属性可以接收两个值，也可以接收一个值，我们分别来讨论：

接收一个值的时候，如果这个值为长度值、百分比或者center的时候，既表示水平的位置也表示垂直的位置；如果这个值为为left、right时，表示水平方向；如果这个值为top、bottom，这个值表示垂直方向
接收两个值的时候第一个值表示水平方向，可以接收值有left、center、right和长度值或者百分比；第二个值表示垂直方向，可以接收值有top、center、bottom和长度值或者百分比。

如下代码展示了object-position属性的用法：

HTML结构如下：

<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>

CSS代码如下：

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;
}

代码的运行结果如下图所示：

04_object-position属性.png

背景图像

CSS中的背景图像主要是指有关background属性的相关内容，该属性是其实是一个简写属性，其属性可以拆分为如下：

background-image属性
background-repeat属性
background-position属性
background-size属性

背景图像

使用background-image属性来引入一个或者多个背景图像，通过url()函数引入，该函数的值为图片的路径，多个使用逗号拆分。

如下代码展示了background-image属性的用法：

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

代码运行结果如下所示：

05_背景图像.png

平铺方式

background-repeat属性用来设置背景图像的重复方式。背景图像可以按照水平方向、垂直方向或者两轴方向重复或者不重复。该属性具有4个值，具体如下：

repeat：图像同时在水平方向和垂直方向进行重复。如果最后一个图像无法显示完整，则会被剪裁。
no-repeat：图像在水平方向和垂直方向都不会重复。
space：图像同时在水平方向和垂直方向进行重复。第一个重复的图像和最后一个重复的图像会被固定在元素的边缘，同时空白间隙会均匀地分布在重复的图像之间。
round：跟随浏览器窗口的尺寸增长，重复的图像会被拉伸（重复的图像之间不存在空白间隙）以铺满整个浏览器窗口。

由于background-repeat属性分为水平方向是否重复和垂直方向是否重复，所以该属性的值是两个：

第一个值：表示水平方向图像是否重复。可使用上述4个值中的一个。
第二个值：表示垂直方向图像是否重复。可使用上述4个值中的一个。

当然，background-repeat属性也可以使用单个值来进行设置，具体情况如下：

单值	等价于双值
`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`

如下代码展示了background-repeat属性的用法

<!DOCTYPE html>
<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>平铺方式</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>