OLD | NEW |
1 iron-image | 1 iron-image |
2 ========== | 2 ========== |
3 | 3 |
4 `iron-image` is an element for displaying an image that provides useful sizing a
nd | 4 `iron-image` is an element for displaying an image that provides useful sizing a
nd |
5 preloading options not found on the standard `<img>` tag. | 5 preloading options not found on the standard `<img>` tag. |
6 | 6 |
7 The `sizing` option allows the image to be either cropped (`cover`) or | 7 The `sizing` option allows the image to be either cropped (`cover`) or |
8 letterboxed (`contain`) to fill a fixed user-size placed on the element. | 8 letterboxed (`contain`) to fill a fixed user-size placed on the element. |
9 | 9 |
10 The `preload` option prevents the browser from rendering the image until the | 10 The `preload` option prevents the browser from rendering the image until the |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base6
4,..." | 51 <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base6
4,..." |
52 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> | 52 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> |
53 ``` | 53 ``` |
54 | 54 |
55 Will fade the light-gray background out once the image is loaded: | 55 Will fade the light-gray background out once the image is loaded: |
56 | 56 |
57 ```html | 57 ```html |
58 <iron-image style="width:400px; height:400px; background-color: lightgray;" | 58 <iron-image style="width:400px; height:400px; background-color: lightgray;" |
59 sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image> | 59 sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image> |
60 ``` | 60 ``` |
OLD | NEW |