Open vedtam opened 7 years ago
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)?
--iron-image-height
paper-card
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"
iron-image
sizing="cover"
Thanks!
+1 I have the same issue with sizing="contain"
sizing="contain"
Iron image gets collapsed while the mixin
--iron-image-height
is set (say 300px) insidepaper-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:works only if I set the height inline:
As normal behaviour I expect the image to fill the
iron-image
element with height and width set explicitly andsizing="cover"
Thanks!