[Ombra]

I have an iframe that is used to display an image, I want the image to automatically fit with iframe's width, like this:



Unfortunately, I couldn't find a solution to this issue except doing the opposize (get a responsive iframe that could fit with its content).

Hours spent at StackOverFlow tought me that users do believe this cannot be done, but I'm convinced that there must be a simple solution, may it be a server sided script or a way to alter ShrinkToFit function. Any suggestion?

Oh, I don't believe it's necessary as it's a simple line, but this is iframe's code:

Code

<iframe style="width:94%; height:90vh;" src="RANDOMURL"/></iframe>

[Nachfolger]

Any item within an iFrame is considered a CORS item and cannot be modified unless the website included within the iFrame allows CORS via HTACCESS.

Why are you not just downloading the image and including it via a img tag?

[Ombra]

Any item within an iFrame is considered a CORS item and cannot be modified unless the website included within the iFrame allows CORS via HTACCESS.

Why are you not just downloading the image and including it via a img tag?

I'm not using a simple img tag because what I'm trying to build is a basic ebook reader, where users can move between pages with buttons and find it hard (for newbies) to leak content.

The iframe allows me display a single ebook page inside the given page, but users reading from mobile would find it hard to take a screen/print the page. I have few ideas for pc users too, but first I need to grant a good visual experience when interacting with the reader.

[Nachfolger]

I'm not using a simple img tag because what I'm trying to build is a basic ebook reader, where users can move between pages with buttons and find it hard (for newbies) to leak content.

The iframe allows me display a single ebook page inside the given page, but users reading from mobile would find it hard to take a screen/print the page. I have few ideas for pc users too, but first I need to grant a good visual experience when interacting with the reader.

If it's on your own domain, then you should be able to edit it using CSS/javascript. Otherwise, perhaps another approach to your idea would be better.

[Ombra]

If it's on your own domain, then you should be able to edit it using CSS/javascript. Otherwise, perhaps another approach to your idea would be better.

Of course it is on my own domain, but I'm not familiar with JS, can you tell me what I should look for?

[Nachfolger]

Of course it is on my own domain, but I'm not familiar with JS, can you tell me what I should look for?

If you don't know basic vanilla javascript then you obviously don't have jQuery, but I don't have time to write out the entire plug and play solution. You'll have to do your part in figuring out how to make this work.

I've added comments, you just need to include the jQuery CDN above this script. Although, you can find someone to make this vanilla JS, or just google and find a vanilla solution.

Code

// Replace # with the id of the iFrame
var iframe = $("#imageIframe");
// Replace #nav with the image ID
iframe.on("load",function () {
    // jQuery allows editing of CSS via the .css() function. I'm setting the width of the image to the width of the viewport.
    iframe.contents().find("#nav").css({width: $(window).width()});
});

https://stackoverflow.com/questions/3883...ame-domain

I'm assuming setting the width of the image to the width of the user's screen, it should work. I depise iFrames and would never use one in my own website so this is just based off of a theory.

Side note: I'm not sure why you appear to take offense to the mention of whether or not it was your own domain. It's completely common to host images etc offsite.

[Ombra]

If you don't know basic vanilla javascript then you obviously don't have jQuery, but I don't have time to write out the entire plug and play solution. You'll have to do your part in figuring out how to make this work.

I've added comments, you just need to include the jQuery CDN above this script. Although, you can find someone to make this vanilla JS, or just google and find a vanilla solution.

Code

// Replace # with the id of the iFrame
var iframe = $("#imageIframe");
// Replace #nav with the image ID
iframe.on("load",function () {
   // jQuery allows editing of CSS via the .css() function. I'm setting the width of the image to the width of the viewport.
   iframe.contents().find("#nav").css({width: $(window).width()});
});

https://stackoverflow.com/questions/3883...ame-domain

I'm assuming setting the width of the image to the width of the user's screen, it should work. I depise iFrames and would never use one in my own website so this is just based off of a theory.

Side note: I'm not sure why you appear to take offense to the mention of whether or not it was your own domain. It's completely common to host images etc offsite.

I didn't take any offense tbh, was just replying to the question :)

Also, I didn't expect to get a sample code so I thank you very much for the attention you're giving to my issue.

I'll try it out