How to target image inside iframe

Question

How can I target image inside iframe with CSS?

This doesn't work

iframe img {
    height: auto;
    width: 100%;
}

That's not possible with CSS only, check this out: http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe — Chris, May 04 '16 at 11:48

score 4 · Accepted Answer · edited Dec 27 '18 at 09:55

4

try jquery for this

$('iframe').contents().find('img').css({width: '100%', 'height': '100%'});

wrap this in jQuery load callback if iframe loads later after the page loaded

$('iframe').load(function() {
    $(this).contents().find('img').css({width: '100%', 'height': '100%'});
})

edited Dec 27 '18 at 09:55

Can Celik

2,050
21
30

answered May 04 '16 at 11:53

Rafi Ullah Patel

136
2
7

score 1 · Answer 2 · answered Jun 28 '19 at 11:54

1

document.querySelector('iframe[name="content2"]').contentWindow.addEventListener('load',function(e){e.target.body.style.textAlign='center'},false)

answered Jun 28 '19 at 11:54

score 0 · Answer 3 · answered May 04 '16 at 11:52

This is a common problem but the answer is same that you can't access things in <iframe> neither with css nor with jquery.

If you have access to the page you are using in <iframe> go and write css on that page then it will be automatically work in <iframe>. But you cant change anything in <iframe> with external code.

score 0 · Answer 4 · edited Apr 25 '19 at 20:54

0

try this under the same domain. otherwise it throws cross origin error.

Update with On load jQuery function.

$('iframe').on("load", function () {

    $(this).contents().find('img').css({width: '100%', 'height': '100%'});

});

edited Apr 25 '19 at 20:54

Community

1
1

answered Jul 26 '17 at 11:24

Manoj

2,000
2
16
21

How to target image inside iframe

4 Answers4