11.3.6 嵌入对象

在网页中嵌入对象，实际上并不会在网页中插入对象，而是通过某种标签链接到指定的对象，标签创建的只是被引用对象的占位符而已。

嵌入式对象主要包括图片、视频、音频、文档等，不同的对象使用不同的标签，并具有不同的样式，本节重点介绍如何控制不同对象的样式，而标签的使用方法不是本节的重点。

图片

使用 img 元素，可以在网页中嵌入一幅图片，并通过CSS的width 和height 属性来定义图片的宽度和高度。定义图片尺寸时，可以使用绝对单位，也可以使用百分比。如：

img  {
    width: 200px;
    height: 200px;
}

使用百分比时，图片的宽度根据元素的 width 计算得到，图片的高度根据元素的 height 计算得到。如，设置图片的width 属性值为 50%，图片的宽度将是父元素宽度的一半。

如果同时定义了 width 和 height 属性，在 width 和height 的比值与图片本身的宽高比不相等时，图片就会在某个方向上被拉伸或压缩，使图片失真。所以，在定义图片尺寸时，建议只定义 width 和 height 中的某个属性，这样的话，浏览器就会按照图片本身的尺寸，按比例进行缩放，图片就不会失真。

当然，也可以不设置图片的宽度和高度，这样的话，图片将按原本的尺寸显示。不过，最好在CSS中作如下声明：

img  {
    max-width: 100%;
}

这样的话，图片就会随着布局自动缩放，当放大到容器的宽度后，图片就会停止放大，可以防止图片尺寸过大而撑破容器。

页面上的 img 元素也是一个盒子，也可以设置边框，既可以使用线条边框，也可以使用图像边框，并支持圆角和盒阴影，可以根据需要或个人喜好进行设置。

网页中，使用一副孤零零图像的情况很少，大多数情况下，一副图像是具有一定上下文关系的，它有标题、背景介绍、内容说明等。这时，就需要使用 figure 元素来定义一个图片单元，在图片单元中，用 img 元素来定义图片，用 figcaption 元素来定义图片的标题。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>

figure 是块级元素，要使 figure 水平居中，只需设置 margin: 0 auto即可。默认情况下，图片和标题都是左对齐，如果要使图片及标题水平居中，为 figure 元素设置 text-align: center即可。

figure {
    margin: 0 auto;
    text-align: center;
}

在word中，图片的标题一般使用黑体，并加粗显示。在这里，为图片标题中的数字使用Georgia字体，这是报表中经常使用的字体，因为它有点艺术范儿。

figcaption {
    font-weight: bold;
    font-family: Georgia, SimHei;
}

上述方法都是使用嵌入的方式向网页插入图片，而在 word 及报纸、杂志等传统的印刷布局中，文本还可以按照需要围绕图像。在网页中，图文混排时，常常需要“文本环绕”的排版形式。

在CSS中，要实现“文本环绕”的效果，只需为图片元素应用 float 属性即可。这里使用 figure 元素来定义图片单元，使用 p 元素来定义文本，并把图片和文本放在一个容器中。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>
<p>八卦是中国道家文化的深奥哲学概念，八卦的形成源于…</p>
<p>根据史料记载，八卦起源于三皇五帝之首的伏羲，伏羲氏在天水卦台…</p>
</div>

如果需要图像在左侧，文本在右侧环绕图片，只需把 figure 或 img（在使用 img 元素定义图片时）的 float 属性值设置为 left 即可。

figure  {
    float: left;
}

运行效果如图 11-18 所示：

同理，如果需要图像在右侧，文本在左侧环绕图片，就要把 figure 或 img 的 float 属性值设置为 right。

使用 float 的好处是，当调整图片尺寸时，文本也将自动调整位置。也可以使容器使用相对定位，图片使用绝对定位来实现同样的布局。但使用这种方式，文本不受图片尺寸的影响，也不会随图片的尺寸自动调整位置。