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

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

STEP0:下载练习文件

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

STEP1:开始

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

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

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

STEP2:添加一个背景图片

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

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

STEP3:预览

点击预览。

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

更多:页面背景图片

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

评论(1)

发表评论

电子邮件地址不会被公开。 必填项已用*标注