Axure RP官方教程翻译(16):宽度充满的图片或横幅

添加一张可以自适应浏览器宽度的并且占满屏幕宽度的图片。实现效果如下:

Axure RP官方教程翻译(16):宽度充满的图片或横幅

STEP 1:开始

打开培训文档中“Full-width image or banner”页面。

这个页面包含一个叫做“Full-width background”的动态面板。

选择“Full-width background”动态面板,在属性标签栏中,点击选择“百分百宽(浏览器生效)”复选框。

Axure RP官方教程翻译(16):宽度充满的图片或横幅

STEP 2:添加背景图片

切换到样式标签栏,在“背景图片”区域,点击导入按钮。然后在本地选择一张图片。(如果不用图片,也可以用“背景颜色”来填充。)

Axure RP官方教程翻译(16):宽度充满的图片或横幅

STEP 3:预览

点击预览。

尝试改变浏览器窗口大小。注意当屏幕宽度过大时,一些图片的尺寸会在数值方向上被剪切。这是因为图片为了保持比例而动态面板却没有。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code