Image collapsed while sizing="cover" with --iron-image-height set, why?

[vedtam]

Iron image gets collapsed while the mixin --iron-image-height is set (say 300px) inside paper-card. The image displays correctly only if I set the height inline, but than why the mixin exists (or do I miss something)?

stock paper-card code:

  .header iron-image {
        display: block;
        width: 100%;
        --iron-image-width: 100%;
        --iron-image-height: 300px;
        pointer-events: none;

        @apply --paper-card-header-image;
      }
...

  <div class="header">
      <iron-image
          hidden$="[[!image]]"
          aria-hidden$="[[_isHidden(image)]]"
          src="[[image]]"
          alt="[[alt]]"
          placeholder="[[placeholderImage]]"
          preload="[[preloadImage]]"
          fade="[[fadeImage]]"
          sizing="cover">
        </iron-image>
      <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
    </div>

works only if I set the height inline:

 <div class="header">
      <iron-image
          hidden$="[[!image]]"
          aria-hidden$="[[_isHidden(image)]]"
          src="[[image]]"
          alt="[[alt]]"
          placeholder="[[placeholderImage]]"
          preload="[[preloadImage]]"
          fade="[[fadeImage]]"
          sizing="cover"
          style="height:300px;">
        </iron-image>
      <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
    </div>

As normal behaviour I expect the image to fill the iron-image element with height and width set explicitly and sizing="cover"

Thanks!

[Wei-LiangChew]

+1
I have the same issue with sizing="contain"