How to change the style of an image inside an iframe

Question

I generate an iframe with Vaadin 7 and the result is:

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

I can add a style class zoom-to-fit to the iframe, but the iframe is wrapped inside a div.

I am trying to stretch the image to the iframe, but it does not work.

I tried the following:

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

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

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

But they don't work.

I added the last one because the html code in the developer tools looks like:

I guess I cannot modify any styles inside the iframe... but how could I resize the image?

I know that if I go to the image and add the first style (width and height at 100% works) but I can only add or remove styles with the Vaadin framework I am using.

https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe and https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe — Shahryar Mohajer, Jan 25 '21 at 17:30
@ShahryarMohajer Yeah, I don't like it very much but the only solution here is to use javascript — Sebastian D'Agostino, Jan 28 '21 at 12:30

score 0 · Answer 1 · answered Jan 26 '21 at 08:24

0

I saw this from a forum post that might help: https://vaadin.com/forum/thread/393458/embedded-component-image-and-setwidth-resizing-both-component-and-image

also there's this from another SO question: Resizing Vaadin Image

answered Jan 26 '21 at 08:24

Luis Gtz

23
3

Thanks, but it does not solve my issue because my main problem is to access the image that is inside the iframe. – Sebastian D'Agostino Jan 27 '21 at 14:27

score 0 · Accepted Answer · answered Jan 28 '21 at 12:31

So, it is impossible to get to change the style with css, so the solution is a bit nasty (or not very nice).

CSS does not know the structure inside iframe, so that it is why it is not applied as I would have wanted. But since bot the site and the content of the iframe are from the same origin, javascript is safe to use (and the only way to make it work).

Luckily there is a tool in vaadin to execute javascript safely. So I can get the iframe tag and then the img tag.

import com.vaadin.ui.JavaScript;

JavaScript.getCurrent().execute(
    "document.getElementsByTagName('iframe')[1].contentDocument.body.children[0].style=" 
    + "'width: 100%; height: 100%;'");

This is vanilla javascript so it should work in most browsers.

How to change the style of an image inside an iframe

2 Answers2