fill to width with CSS in Python flask

Question

I'm trying to show 4 webpages in a single webpage, so basically divide the screen in 4 quadrants and each quadrant displays a webpage. I've done this include the below code in Python's flask web framework using HTML. However, the image doesn't scale properly to relect the changes in the browser window size and shows scroll bars. How can I fix this? Cheers!

from flask import Flask

app=Flask(__name__)
@app.route('/')
def home():
      url="http://www.designpointfurniture.com/wp-content/uploads/2019/01/test-5.jpg"
      return """

        <iframe id="1" src="http://www.designpointfurniture.com/wp-content/uploads/2019/01/test-5.jpg" style="float:right;height:50%;width:50%;border:none;overflow:hidden;position:relative;object-fit:scale-down;"></iframe>
        <iframe id="2" src="http://www.designpointfurniture.com/wp-content/uploads/2019/01/test-5.jpg" style="float:left;height:50%;width:50%;border:none;overflow:hidden;position:relative;object-fit:fill;"></iframe>
        <iframe id="3" src="http://www.designpointfurniture.com/wp-content/uploads/2019/01/test-5.jpg" style="float:right;height:50%;width:50%;border:none;overflow:hidden;position:relative;object-fit:contain;"></iframe>
        <iframe id="4" src="http://www.designpointfurniture.com/wp-content/uploads/2019/01/test-5.jpg" style="float:left;height:50%;width:50%;border:none;overflow:hidden;position:relative;object-fit:none;"></iframe>
        """

if __name__=='__main__':
    app.run("0.0.0.0", port="8005")

Answer 1

It sounds like your Real question is "Can I make iframes responsive?" and the answer is... No. iframes are notorious for NOT being responsive.

Depending on the purpose of your page, you could:

• If you have access to edit the original pages within the iframes then edit the pages first. Make them responsive (pre-iframe) and that will allow the pages to look good when they eventually appear in an iframe. but you can not make an iframe's content responsive after it appears in an iframe.
• Simply link to the 4 different pages (probably not ideal)
• or you may be able to get away with setting custom sizes for the iframes as best you can (by defining width and height in the iframe's attributes).