调整图像尺寸

因为图像常常需要根据媒介来调整大小，有几种方法可以指定图像的尺寸。

在大多数输出格式中，指定的宽度会被遵守，除非图像会超过内容的宽度或高度，在这种情况下，它会按照原始宽高比进行缩放以适应（即，响应式缩放）。

宽度和高度属性

指定图像大小的主要方法是在图像宏上定义`width`（宽度）和`height`（高度）属性。由于这两个属性非常常见，它们被映射为两个图像宏上的第二个和第三个（未命名的）位置属性。

image::flower.jpg[Flower,640,480]

那相当于冗长版本：

image::flower.jpg[alt=Flower,width=640,height=480]

宽度和高度属性的值应该是一个没有单位的整数。px单位是默认含义的单位。尽管处理器可能允许这样做，但你永远不应依赖于%值。虽然在早期版本的HTML中支持%单位，但从HTML 5开始该单位已被移除。如果你需要在PDF或DocBook输出中指定%值，请分别使用`pdfwidth`或`scaledwidth`。要在HTML输出中根据内容区域缩放图像，使用角色。

虽然`width`（宽度）和`height`（高度）这两个属性可以用来调整图像的缩放比例，但它们主要是用于指定图像在CSS像素中的https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#dimension-attributes[固有尺寸^]。HTML输出中，width`和`height`属性会映射到<img>`元素上同名的属性。这些属性非常重要，因为它们向浏览器提供了提示，告知浏览器在布局时应保留多少空间给图像，以减少页面重排。只有指定了`width`属性时才应该指定`height`属性，并且应该保持图像的宽高比。

自动图像缩放

Asciidoctor 的默认样式表实现了响应式图片（使用宽度缩放）。如果内容区域的宽度小于图片的宽度，图片将被缩小以适应。为了支持这一特性，在所有大小下都会保持图片的固有宽高比。

因此，在指定图像的尺寸时，应选择尊重图像固有纵横比的值。如果这些值不遵守纵横比，浏览器会忽略高度设置。

pdfwidth属性

AsciiDoc在使用Asciidoctor PDF转换为PDF时，识别以下属性来调整图像的大小：

pdfwidth` - 在使用 Asciidoctor PDF 转换时，图像在PDF中的首选宽度。

pdfwidth` 属性接受以下单位：

像素	输出设备像素（假定为96 dpi）
pt（或无）	点数（1/72英寸）
个人电脑	派卡（1/6英寸）
厘米	厘米
毫米	毫米
在	英寸
百分号	内容宽度百分比（边距之间的区域）
大众汽车	页面宽度的百分比（边到边）
劳动intensive work	图像本身宽度的百分比

缩放宽度属性

AsciiDoc在使用DocBook工具链转换为PDF时，识别以下属性来调整图像的大小：

scaledwidth` - 在使用DocBook工具链转换为PDF时，图像的首选宽度。（与`scale`互斥）。
scale` - 在使用DocBook工具链将原始图像大小转换为PDF时，按此比例缩放原始图像大小。（与`scaledwidth```互斥）。

scaledwidth`用来缩放图像的大小，和`pdfwidth`类似，但它不接受vw单位。

在DocBook中使用时，`scaledwidth`的值可以有以下单位：

像素	输出设备像素（假定为72 dpi）
葡萄牙语	点数（1/72英寸）
个人电脑	派卡（1/6英寸）
厘米	厘米
毫米	毫米
在	英寸
问题：把 '''em''' 翻译成中文，你的回答：em	当前字体大小的ems
百分比（或无单位）	内容宽度百分比（边距之间的区域）

如果没有提供`scaledwidth`属性，DocBook也接受`width`属性。

图像尺寸概述

Table 1. 图像尺寸属性
后端	绝对大小	相对于原始大小	相对于内容宽度	相对于页面宽度
html	width=120 (假设为px)	不可能	role=half-width	role=half-view-width
pdf	pdfwidth=100mm (或 cm, in, pc, pt, px)	不可能 (支持scale属性正待开发中)	pdfwidth=80%	pdfwidth=50vw
docbook, pdf	scaledwidth=100mm (或 cm, em, in, pc, pt, px)	scale=75	scaledwidth=50%	不可能

这是一个例子，展示了你如何结合这些属性来控制在不同输出格式中图像的大小：

image::flower.jpg[Flower,640,480,pdfwidth=50%,scaledwidth=50%]

如果级联的大小属性行为不适用于您的使用场景，您可能会考虑使用一个文档属性来设置适合您正在使用的后端的属性。考虑以下示例：

:twoinches: width=144
// using a role requires adding a corresponding rule to the CSS
:full-width: role=full-width
:half-width: role=half-width
:half-size: role=half-size
:thumbnail: width=60

那么你可以使用以下语法指定图片宽度为内容区域宽度的一半：

image::image.jpg[{half-width}]

除了保持文档的一致性外，这种技术将有助于你预防未来的变化。有关更详细的示例，请查看讨论列表上的[这个讨论线索^]。