铁图像元素中的拉伸图像 [英] Stretch image in iron-image element

问题描述

我在div中有一个元素：< div style =width：330px;>< iron-image src =image.png>< / iron-image> ;< / 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">

希望它有帮助！

这篇关于铁图像元素中的拉伸图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！