On my website, when clicking on links, I need to display a modal popup (see also this solution) that:

• sometimes shows an external website (link #1 below)
• sometimes shows just a JPG image (link #2 below)

Problem: when displaying:

1. external website in a modal popup, the size is ok (see link #1)

2. jpeg image in a modal popup, the size is not ok, in the sense it doesn't adapt to the screen (see link #2):

3. jpeg image in a new window, the size is ok, automatically adapted to fit to screen (see link #3)

Question: How to make that a JPG image displayed in a modal popup iframe auto-adapts its size, i.e. if the JPG's height is high, it's automatically resized? i.e. exactly like it would happen when displaying the image in a new window (see link #3)

PS: don't forget to enable Load unsafe scripts in browser when trying this code snippet. If not, iframes won't be displayed.

Or use this live demo jsfiddle.

document.getElementById("link1").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link2").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  ".jpg";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link3").onclick = function(e) {
  window.open('.jpg', 'newwindow', 'width=700,height=500'); 
  e.preventDefault();
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link1">Click me (website, modal popup)</a><br>
<a href="" id="link2">Click me (jpg image, modal popup)</a><br>
<a href="" id="link3">Click me (jpg image, new window)</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

On my website, when clicking on links, I need to display a modal popup (see also this solution) that:

• sometimes shows an external website (link #1 below)
• sometimes shows just a JPG image (link #2 below)

Problem: when displaying:

1. external website in a modal popup, the size is ok (see link #1)

2. jpeg image in a modal popup, the size is not ok, in the sense it doesn't adapt to the screen (see link #2):

3. jpeg image in a new window, the size is ok, automatically adapted to fit to screen (see link #3)

Question: How to make that a JPG image displayed in a modal popup iframe auto-adapts its size, i.e. if the JPG's height is high, it's automatically resized? i.e. exactly like it would happen when displaying the image in a new window (see link #3)

PS: don't forget to enable Load unsafe scripts in browser when trying this code snippet. If not, iframes won't be displayed.

Or use this live demo jsfiddle.

document.getElementById("link1").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "http://example.";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link2").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src =  "https://i.imgur./pz2iPBW.jpg";
    document.getElementById('popupdarkbg').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
}

document.getElementById("link3").onclick = function(e) {
  window.open('https://i.imgur./pz2iPBW.jpg', 'newwindow', 'width=700,height=500'); 
  e.preventDefault();
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link1">Click me (website, modal popup)</a><br>
<a href="" id="link2">Click me (jpg image, modal popup)</a><br>
<a href="" id="link3">Click me (jpg image, new window)</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

• javascript
• html
• iframe
• popup

• What is your serverside language? – Munim Munna Commented Mar 9, 2018 at 9:21
• @MunimMunna I use Python. – Basj Commented Mar 9, 2018 at 9:26
• check my answer, and let me know of any clarifications. – Munim Munna Commented Mar 16, 2018 at 9:33

5 Answers 5

If you need to fit the image to <iframe> window, you have to apply some CSS style or set image dimension by JavaScript. But in this case images are being served from different domain, so you cannot access the contents of the <iframe>.

The best way in this case and even if the image is not being served from different origin, is to make an html page for the image and load that html page in the <iframe>.

image-preview.py

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%}
            img{
                max-width: 100%;
                max-height: 100%;
            }
        </style>
    </head>
    <body>
        <img src="https://i.imgur./pz2iPBW.jpg" alt="">
    </body>
</html>

You can make it dynamic by using get parameters in url like, http://yourdomain./image-preview.py?src=https://i.imgur./pz2iPBW.jpg.

Are you saying you need to sometimes display an image but in an iframe?

Without an iframe, here is one way you could do it using background-image:

https://jsfiddle/um2799fu/8/

If you only need to load images from the other websites you can use <img/> with width:100; height: auto; balise.

You can keep the iframe popup for websites on an other event. Of course you could detect what content (img/website) you want to show and display the corresponding popup.

Here is the fiddle

You can use width only for that

width: 100%;

Before using width: 100%; After using width: 100%;

I tried many solutions, but finally the easiest was to use both an iframe and an img (only one of them is used at a precise time, the other is empty):

<div id="popup">
    <iframe id="popupiframe"></iframe>
    <img id="popupimg"></img>
    <div id="popupclose">❌</div>
</div>
<div id="popupdarkbg"></div>

and to check with JavaScript if the URL is an image or not:

var url = this.getAttribute('href');
if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.png')) {
    document.getElementById('popupimg').src = url;
    document.getElementById('popupimg').style.display = "block";
    document.getElementById('popupiframe').style.display = "none";
} else {
    document.getElementById('popupiframe').src = url;
    document.getElementById('popupimg').style.display = "none";
    document.getElementById('popupiframe').style.display = "block";
  }

Note: it uses endsWith.