html - 如何更改 iframe 内图像的样式

Question

我用 Vaadin 7 生成了一个 iframe，结果是：

<div class="zoom-to-fit" style="width: 1200px; height: 900px;">
    <iframe src="http://localhost:8090/image.png" frameborder="0" width="100%" height="100%">
    </iframe>
</div>

我可以向 iframe 添加样式类zoom-to-fit，但 iframe 包装在 div 中。

我正在尝试将图像拉伸到 iframe，但它不起作用。

我尝试了以下方法：

.zoom-to-fit {
    width: 100%;
    height: 100%;
}

.zoom-to-fit {
    background-size: 100% 100%;
}

.zoom-to-fit > html > body > img {
    width: 100%;
    height: 100%;
}

但它们不起作用。

我添加了最后一个，因为开发人员工具中的 html 代码如下所示：

我想我无法修改 iframe 内的任何样式......但我怎么能调整图像的大小？

我知道如果我转到图像并添加第一个样式（宽度和高度为 100% 有效），但我只能使用我正在使用的 Vaadin 框架添加或删除样式。

标签： htmlcssiframevaadinvaadin7

Answer 1

我从可能有帮助的论坛帖子中看到了这一点： https ://vaadin.com/forum/thread/393458/embedded-component-image-and-setwidth-resizing-both-component-and-image

另一个SO问题也有这个： Resizing Vaadin Image