third_party/polymer/v1_0/components-chromium/iron-image/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-image/README.md

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Restore bower.json files. Created 4 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/iron-image/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/iron-image/index.html » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1

2 <!---

3

4 This README is automatically generated from the comments in these files:

5 iron-image.html

6

7 Edit those files, and our readme bot will duplicate them over here!

8 Edit this file, and the bot will squash your changes :)

9

10 The bot does some handling of markdown. Please file a bug if it does the wrong

11 thing! https://github.com/PolymerLabs/tedium/issues

12

13 -->

14

15 [![Build status](https://travis-ci.org/PolymerElements/iron-image.svg?branch=mas ter)](https://travis-ci.org/PolymerElements/iron-image)

16

17 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-image)_

18

19

20 ##<iron-image>

21

22 `iron-image` is an element for displaying an image that provides useful sizing a nd

23 preloading options not found on the standard `<img>` tag.

24

25 The `sizing` option allows the image to be either cropped (`cover`) or

26 letterboxed (`contain`) to fill a fixed user-size placed on the element.

27

28 The `preload` option prevents the browser from rendering the image until the

29 image is fully loaded. In the interim, either the element's CSS `background-col or`

30 can be be used as the placeholder, or the `placeholder` property can be

31 set to a URL (preferably a data-URI, for instant rendering) for an

32 placeholder image.

33

34 The `fade` option (only valid when `preload` is set) will cause the placeholder

35 image/color to be faded out once the image is rendered.

36

37 Examples:

38

39 Basically identical to `<img src="...">` tag:

40

41 ```html

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

43 ```

44

45 Will letterbox the image to fit:

46

47 ```html

48 <iron-image style="width:400px; height:400px;" sizing="contain"

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

50 ```

51

52 Will crop the image to fit:

53

54 ```html

55 <iron-image style="width:400px; height:400px;" sizing="cover"

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

57 ```

58

59 Will show light-gray background until the image loads:

60

61 ```html

62 <iron-image style="width:400px; height:400px; background-color: lightgray;"

63 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>

64 ```

65

66 Will show a base-64 encoded placeholder image until the image loads:

67

68 ```html

69 <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base6 4,..."

70 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>

71 ```

72

73 Will fade the light-gray background out once the image is loaded:

74

75 ```html

76 <iron-image style="width:400px; height:400px; background-color: lightgray;"

77 sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image>

78 ```

79

80 \| Custom property \| Description \| Default \|

81 \| --- \| --- \| --- \|

82 \| `--iron-image-placeholder` \| Mixin applied to #placeholder \| `{}` \|

83 \| `--iron-image-width` \| Sets the width of the wrapped image \| `auto` \|

84 \| `--iron-image-height` \| Sets the height of the wrapped image \| `auto` \|

85

86

OLD	NEW