铁图像元素中的拉伸图像

问题描述：

我在div中有一个元素：< div style =width：330px;>< iron-image src =image.png>< / iron-image&gt ;< / div> 。
图片的宽度为315px，高度为237px。我想让这张图像拉伸并使其宽度为330px，因为它是内部的容器，并且高度自动为了不破坏图像比例。

我试过这个：

I have an element inside a div : <div style="width:330px;"><iron-image src="image.png"></iron-image></div> . The image is 315px in width and 237px height. I want this image to stretch and make it 330px in width as it the container that is inside of, and the height to be auto to do not break the image ratio.
I have tried this :

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

和：

And :

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

如何制作< img ...> < iron-image> 元素中的code>元素拉伸至330px宽度和自动高度？

How do i make the <img ... > element inside the <iron-image> element stretch to 330px width and automatic height ?

答

我有同样的问题，尺寸属性不能帮助我，因为铁图像内的img在阴凉的DOM下，您可以通过:: content访问它。

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%;
}

和

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

for :: content在Light dom中工作（在自定义元素之外）不要忘记

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

<style is="custom-style">

希望它有帮助！

铁图像元素中的拉伸图像

相关推荐