Stretch image in iron-image element

后端 未结 4 1080
北恋
北恋 2021-01-23 06:51

I have an element inside a div :

. The image is 315px in width
相关标签:
4条回答
  • 2021-01-23 07:15

    I also wanted to update "img" tag style which is "under" (=shadow DOM) the iron-image.

    To do so I have updated the style, here is the dart code:

    querySelectorAll('img').forEach((Element img) {
    img.setAttribute('style', 'width:330px;height:auto');
    });
    

    This code is placed within the PolymerElement "attached" available function (wouldn't work in the "ready" function)

    attached Called after the element is attached to the document.

    0 讨论(0)
  • 2021-01-23 07:21

    I was looking for a way to do width 100% and height to auto. This worked for me:

    <template>
      <style is="custom-style" include="uvalib-theme">
        :host {
          display: block;
          width: 100%;
          height: auto;
        }
        iron-image {
          --iron-image-width: 100%;
        }
      </style>
    
      <iron-image width="100%" src="myimg"></iron-image>
    

    0 讨论(0)
  • 2021-01-23 07:22

    I had the same problem, the sizing attribute doesn't help me for that, and because the img inside iron-image is under shady DOM, you can access it with ::content.

    #imgWrapper {
        width: 330px;
    }
    iron-image {
        width:100%;
    }
    iron-image::content img {
        width: 100%;
    }
    

    and

    <div id="imgWrapper">
        <iron-image src="image.png"></iron-image>
    </div>
    

    for ::content to work in light dom (outside of a custom element) don't forget

    <style is="custom-style">
    

    Hope it helps !

    0 讨论(0)
  • 2021-01-23 07:32

    I have the same problem and found paper-card. It works perfectly:

    <paper-card image="YOUR_IMAGE_URL_HERE">
      <div class="card-content">
         <img src="OR_HERE">
      </div>
    </paper-card>
    
    0 讨论(0)
提交回复
热议问题