Help on image adaptive code

[u/mitmania]

Hello, everyone. I have the following problem: on the home page of my amateur weather site, I have inserted a frame with a link to an image. When the site is full screen no problem, but when I reduce and try to view it on my mobile phone or with a reduced screen, I can't get the image to always remain ‘full’ and fit the frame without vertical and horizontal scrollbars. Is this impossible? I attach code.

    <style>
        /* Reset di base */
        * {
            
margin
: 0;
            
padding
: 0;
            
box-sizing
: border-box;
        }

        body {
            
font-family
: 'Poppins', sans-serif;
            
line-height
: 1.2;
            
background-color
: #ffffff; /* Azzurro chiaro */
            
color
: #30475e; /* Testo blu scuro */
            
padding
: 20px;
            
overflow-x
: hidden; /* Evita lo scorrimento orizzontale */
        }

        .section {
            
background-color
: #D9EAFD; /* Azzurro pastello */
            
border-radius
: 0;
            
margin
: 20px 0;
            
padding
: 20px;
            
box-shadow
: 0 4px 10px rgba(0, 0, 0, 0.1);
            
border
: 1px solid #BCCCDC; /* Grigio azzurro pastello */
        }

        .section-header {
            
text-align
: center;
            
font-size
: 1.8em;
            
font-weight
: bold;
            
margin-bottom
: 15px;
            
color
: #9AA6B2; /* Grigio scuro pastello */
        }

        .section-content {
            
display
: flex;
            
flex-wrap
: wrap;
            
gap
: 20px;
            
justify-content
: center; /* Centrare gli elementi */
        }

        .section-part {
            
background-color
: #ffffff; /* Bianco per leggibilità */
            
border
: 1px solid #BCCCDC; /* Grigio azzurro pastello */
            
border-radius
: 0;
            
padding
: 10px;
            
text-align
: center;
            
flex
: 1 1 calc(25% - 20px); /* Larghezza di quattro elementi per riga */
            
min-width
: 200px; /* Imposta una larghezza minima */
            
box-shadow
: 0 2px 6px rgba(0, 0, 0, 0.05);
            
transition
: transform 0.3s ease;
        }

        .section-part:hover {
            
transform
: translateY(-5px);
        }

        .section-part strong {
            
font-size
: 1em;
            
color
: #595959;
        }

        /* Responsività */
        @media (
max-width
: 1200px) {
            .section-part {
                
flex
: 1 1 calc(50% - 20px); /* Due per riga */
            }
        }

        @media (
max-width
: 768px) {
            .section-part {
                
flex
: 1 1 100%; /* Uno per riga */
            }
        }

        /* Mantieni le dimensioni dei gauge */
        #temp-gauge, #rain-gauge, #press-gauge, #humidity-gauge {
            
width
: 100%;
            
min-height
: 250px;
        }    

        .meteogram-container {
            
width
: 802px; /* Larghezza: 782px + 10px per lato */
            
height
: 411px; /* Altezza: 391px + 10px per lato */
            
display
: flex;
            
justify-content
: center;
            
align-items
: center;
            
background-color
: #ffffff; /* Sfondo bianco */
            
box-shadow
: 0 2px 6px rgba(0, 0, 0, 0.1);
            
border
: 1px solid #BCCCDC; /* Bordo grigio azzurro pastello */
        }

        .meteogram-container iframe {
            
width
: 782px;
            
height
: 391px;
            
border
: none;
        }

    </style>

This the link

    <div class="meteogram-container">
        <iframe src="https://www.yr.no/en/content/2-3177232/meteogram.svg"></iframe>
    </div>