全屏宽的图片或横幅 | Full-Width Image or Banner

添加一个可以根据浏览器窗口的调整而自适应全屏宽度的图片。

STEP0：下载练习文件

如果你还没有练习文件，请下载Axure Training.rp并在Axure RP中打开它，该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程，但是如果你无法保证，那也没有关系，我们也会告诉你在不使用Axure Training.rp文件的情况下，如何创建新文件来完成教程。

STEP1：开始

在练习文件中打开“全屏宽的图片或横幅”页面。

这个页面包含了一个名为“全屏宽的背景”的动态面板。

选中这个动态面板，在属性页签下，点击“100%宽度<仅限浏览器中有效>”的复选框。

STEP2：添加一个背景图片

切换到“样式”页签，在“背景图片”区域，点击“导入”按钮，你可以下载这个图片来导入，或者选择一个你自己的图片。（如果要将页面设置为纯色背景，可以使用“背景颜色”选项。）

在样式页签底部的下拉菜单中，选择“填充”选项，设置该选项后，图片就会始终参照浏览器的完整宽度。

STEP3：预览

点击预览。

尝试调整浏览器窗口的大小，值得注意的是，当宽度较大时，一些图片会被垂直切割，这是因为图片保持了其高宽比，而动态面板没有。

更多：页面背景图片

要使图片覆盖整个浏览器窗口，需要为页面本身设置背景图片，你可以点击画布的空白区域，以切换到页面检视器，然后安装上面STEP2的步骤操作。当背景图片设置为“填充”时，页面的背景图片将始终保持浏览器窗口的宽度和高度。