聚合物 - Iron Image

上一个
下一个

<iron-image> 是一个图像显示元素。该图像以有用的尺寸和预加载选项显示。

调整大小选项将图像裁剪（覆盖）或信箱格式（包含）以适应其指定的大小，而预加载选项将阻止图像被渲染。同时，您既可以使用元素的 CSS 背景色作为占位符，也可以使用 data-URI。淡化选项可在渲染图像后淡出占位符的图像/颜色。

与 <img scr = "...."> 中显示的 <iron-image> 元素相似，如下面的代码段所示 -

<iron-image src = "http://lorempixel.com/600/600"></iron-image>

示例

要使用 iron-image 元素，请使用 bower 安装 iron-image 元素并将其导入到您的 index.html 文件中。以下代码显示了一张纯图像 -

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
   </head>
  
   <body>
      <h1>Iron-Image Example</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png" 
         alt = "iron-image" ></iron-image>
   </body>
</html>

您将获得如下面的屏幕截图中所示的输出。

Iron Image Plain

使用选项 sizing = "cover"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-cover {
            width: 140px;
            height: 140px;
            background: LightGrey;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "cover"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "cover" id = "sizing-cover" alt = "iron-image" ></iron-image>
   </body>
</html>

您将获得如下面的屏幕截图中所示的输出。

Iron Image cover

使用选项 sizing = "contain"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-contain {
            width: 140px;
            height: 140px;
            background: #ddd;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "contain"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "contain" id = "sizing-contain" alt = "iron-image" ></iron-image>
   </body>
</html>

您将获得如下面的屏幕截图中所示的输出。

Iron Image contain

以下代码显示了灰色背景以及 base-64 编码的占位符，直至图像加载。

<iron-image style = "width:800px; height:600px; background-color: grey;"
   placeholder = "data:image/jpeg;base64,..."
   sizing = "cover" preload src = "http://lorempixel.com/600/600"></iron-image>

以下代码在图像渲染后淡出图像。

<iron-image style = "width:800px; height:600px; background-color: grey;"
   sizing = "cover" preload fade src = "http://lorempixel.com/600/600"></iron-image>

下表显示了 <iron-image> 元素的自定义属性。

序号 自定义属性和说明 默认
1

--iron-image-placeholder

这是一种混合，可用于为 #placeholder 设置样式。

 {}
2

--iron-image-width

使用此属性可以设置由 iron-image 封装的图像的宽度。

 auto
3

--iron-image-height

使用此属性可以设置由 ironimage 封装的图像的高度。

 auto
polymer_elements.htm
打印页面
上一个
下一个
广告