New properties for iron-image and new mid-level iron image in advance…

…d mode.

paper-card.html

@@ -91,7 +91,6 @@
         width: 100%;
         --iron-image-width: 100%;
         pointer-events: none;
-
         @apply(--paper-card-header-image);
       }
 
@@ -134,16 +133,56 @@
 
         @apply(--paper-card-actions);
       }
+
+      .aspect-ratio iron-image {
+        position: absolute;
+        top: 0;  bottom: 0;  left: 0;  right: 0;
+        /* padding: 0 24px; Optional padding for content area */
+      }
+
+      .image-box-wrapper {
+        position: relative;
+        width: 100%; /* <-- just a default, can be anything. */
+      }
+
+      .seven-by-one.aspect-ratio {
+        padding-bottom: 14.2857%;
+      }
+
+      .sixteen-by-nine.aspect-ratio {
+        padding-bottom: 56.25%
+      }
+
+      .three-by-two.aspect-ratio {
+        padding-bottom: 66.666%
+      }
+
+      .four-by-three.aspect-ratio {
+        padding-bottom: 75%
+      }
+
+      .custom.aspect-ratio {
+        padding-bottom: var(--paper-card-image-aspect-ratio, 100%);
+      }
     </style>
 
     <template is="dom-if" if="[[advanced]]" restamp="true">
       <content select=".card-header"></content>
+      <div hidden$="[[!image]]" class="image-box-wrapper">
+        <div class$="[[imageAspectRatio]] aspect-ratio">
+          <iron-image id="advancedImage" hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]"
+                      fade$="[[fadeImage]]" sizing="[[imageSizing]]" position="[[imagePosition]]" width="[[imageWidth]]"
+                      height="[[imageHeight]]"></iron-image>
+        </div>
+      </div>
       <content select=".card-content"></content>
       <content select=".card-actions"></content>
     </template>
     <template is="dom-if" if="[[!advanced]]" restamp="true">
       <div class="header">
-        <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image>
+        <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"
+                    sizing="[[imageSizing]]" position="[[imagePosition]]" width="[[imageWidth]]"
+                    height="[[imageHeight]]"></iron-image>
         <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div>
       </div>
       <content></content>
@@ -155,7 +194,6 @@
       is: 'paper-card',
 
       properties: {
-
         /**
          * Informs element to treat content as separate header and body areas, instead of default header behaviour,
          * with property set it is possible to override header as complex as required. Card image related properties
@@ -183,6 +221,56 @@
           value: ''
         },
 
+        /**
+         * `iron-image`, sizing option, applies to both advanced media area and header image
+         * From `iron-image` documentation:
+         * Valid values are `contain` (full aspect ratio of the image is contained within the element and
+         * letterboxed) or `cover` (image is cropped in order to fully cover the
+         * bounds of the element), or `null` (default: image takes natural size).
+         */
+        imageSizing: {
+          type: String,
+          value: 'null'
+        },
+
+        /**
+         * `iron-image`, `position` property
+         * From `iron-image` documentation:
+         * When a `imageSizing` option is used (`cover` or `contain`), this determines
+         * how the image is aligned within the element bounds (default: `center`)
+         */
+        imagePosition: {
+          type: String,
+          value: 'center'
+        },
+
+        /**
+         * In `advanced` mode only, `iron-image` will be limited by this aspect ratio depending on the card width
+         * Supported values are `sixteen-by-nine`, `three-by-two`, `four-by-three` or `seven-by-one`, finally if
+         * `--paper-card-image-aspect-ratio` variable is set you can use `custom` value
+         */
+        imageAspectRatio: {
+          type: String,
+          value: 'sixteen-by-nine',
+          observer: '_switchImageRatio'
+        },
+
+        /**
+         * `iron-image`, `width` property
+         */
+        imageWidth: {
+          type: Number,
+          value: null
+        },
+
+        /**
+         * `iron-image`, `height` property
+         */
+        imageHeight: {
+          type: Number,
+          value: null
+        },
+
         /**
          * When `true`, any change to the image url property will cause the
          * `placeholder` image to be shown until the image is fully rendered.
@@ -231,6 +319,10 @@
         }
       },
 
+      _switchImageRatio: function(newAR, oldAR) {
+        this.updateStyles();
+      },
+
       _headingChanged: function(heading) {
         var label = this.getAttribute('aria-label');
         this.setAttribute('aria-label', heading);