Homarr•7mo ago

image scaling in iframes

Following some discussion in general, I'm hoping for help or insights from anyone for how to autoscale an image to fit into an iframe. This started with a desire to just have the APOD in an iframe and snowballed from there. The APOD is already being pulled with a bash command, but due to the daily resolution changes, will require autoscaling to fit an iframe. This will no longer be required once the picture widget rolls out.

Solution:

Jump to solution

5 Replies

Manicraft1001•7mo ago

Hi, here the promised HTML file that you can serve from any static web host (eg. Nginx). You can embed this and the image should be centered now. Save this to index.html 🙂

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                background: url('https://apod.nasa.gov/apod/image/2310/Ngc1097wSn_Miller_1008.gif');
                background-size: cover;
            }
        </style>
    </head>
    <body></body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                background: url('https://apod.nasa.gov/apod/image/2310/Ngc1097wSn_Miller_1008.gif');
                background-size: cover;
            }
        </style>
    </head>
    <body></body>
</html>

Tag•7mo ago

Quick note: I am planning in a further update to add dynamic backgrounds and one of the possible sources will be nasa's APOD

explosive parrot•7mo ago

Okay, I got it to work without a static web host, just parking the html file in the apod picture folder and replacing the picture URL for astropix.jpg (local image)

Solution

explosive parrot•7mo ago

autoscales pretty well.

Gaming

Programming

image scaling in iframes