在 iron-image 元素中拉伸图像

Question

我在 div 中有一个元素： <div style="width:330px;"><iron-image src="image.png"></iron-image></div> 。图片的宽度为 315px，高度为 237px。我希望这个图像拉伸并使其宽度为 330 像素，因为它是内部的容器，并且高度是自动的，以免破坏图像比例。
我试过这个：

iron-image {
    width:330px;
    height:auto;
}
iron-image img {
     width:330px;
     height:auto;
}

并且：

<div style="width:330px;"><iron-image src="image.png" style="width:330px;height:auto"></iron-image></div>

如何使 <iron-image> 元素内的 <img ... > 元素拉伸到 330 像素宽度和自动高度？

Answer 1

我遇到了同样的问题，sizing 属性对我没有帮助，并且因为 iron-image 中的 img 在 shady DOM 下，您可以使用 ::content 访问它。

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

和

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

让 ::content 在光照下工作 dom（在自定义元素之外）不要忘记

<style is="custom-style">

希望对您有所帮助！

Answer 2

我也一样problem and found paper-card。它完美运行：

<paper-card image="YOUR_IMAGE_URL_HERE">
  <div class="card-content">
     <img src="OR_HERE">
  </div>
</paper-card>

Answer 3

我还想更新 "img" 标签样式，它是 "under" (=shadow DOM) 铁图像。

为此我更新了样式，这里是飞镖代码：

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

此代码位于 PolymerElement "attached" 可用函数中（在 "ready" 函数中不起作用）

attached Called after the element is attached to the document.

Answer 4

我正在寻找一种将宽度 100% 和高度设置为自动的方法。这对我有用：

<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>

在 iron-image 元素中拉伸图像

Stretch image in iron-image element

html

css

image

polymer

polymer-1.0