Προσαρμογή εικόνας iframe

silve · 15 Δεκεμβρίου 2024

Γεια χαρά σε όλους,

θέλω να βάλω σε μια σελίδα μια camera και συγκεκριμένα την https://www.forecastweather.gr/pilioxionodromiko/cam.php (είναι στατική εικόνα που ανανεώνεται). Το βάζω σε iframe και προσαρμόζω το ύψος και το πλάτος και εξακολουθεί να μου βγάζει στο παράθυρο που δημιουργείται τις μπάρες κύλισης. Θέλω να φαίνεται ολόκληρη η εικόνα της κάμερας. Να γίνει scale όλη η εικόνα και να φαίνεται ολόκληρη. Είναι αυτό εφικτό;

Επεξ/σία 15 Δεκεμβρίου 2024 από silve

octa · 15 Δεκεμβρίου 2024

Καλησπέρα,

Νομίζω ότι με αυτά τα css θα λυθέι το πρόβλημα

.iframe-container {
    width: 100%; 
    height: 100%; 
    position: relative;
    overflow: hidden; 
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}

Βάλε ένα div class="iframe-container" και μέσα το iframe.

Για δες , νομίζω δουλεύει έτσι.

silve · 15 Δεκεμβρίου 2024

15 λεπτά πριν, octa είπε
Καλησπέρα,

Νομίζω ότι με αυτά τα css θα λυθέι το πρόβλημα
.iframe-container {
    width: 100%; 
    height: 100%; 
    position: relative;
    overflow: hidden; 
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}
Βάλε ένα div class="iframe-container" και μέσα το iframe.

Για δες , νομίζω δουλεύει έτσι.

Εννοείς αυτό; Δεν λειτουργεί καθόλου έτσι. Μήπως κάνω κάτι λάθος;

<div class="iframe-container">
    <iframe src="https://www.forecastweather.gr/pilioxionodromiko/cam.php"></iframe>
</div>

octa · 15 Δεκεμβρίου 2024

Ναι. Και τα css βάλε.

silve · 15 Δεκεμβρίου 2024

19 λεπτά πριν, octa είπε

Ναι. Και τα css βάλε.

Δεν δουλεύει καθόλου... 😕 περίεργο...

Και σε έναν live editor που το βάζω πάλι δε λειτουργεί...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.iframe-container {
    width: 100%; 
    height: 100%; 
    position: relative;
    overflow: hidden; 
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}
</style>
</head>
<body>

<div class="iframe-container">
    <iframe src="https://www.forecastweather.gr/pilioxionodromiko/cam.php"></iframe>
</div>

</body>
</html>

octa · 15 Δεκεμβρίου 2024

Μια τελευταία προσπάθεια.

Μάλλον φταίνε τα

position: absolute;

top: 0;

left: 0;

Τα εμφανίζει στο πάνω μέρος της σελίδας.

Προσπάθησε να τα βγάλεις.

Και μετα το

overflow: hidden;

EDIT :

Είναι πολύ δύσκολο αυτό που θέλεις να κάνεις.

Δεν βρήκα λύση, ούτε με javascript.

Μπορείς να το βάλεις το https://www.forecastweather.gr/pilioxionodromiko/cam.php σε εικόνα.

Όπως

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 

</head>
<body>

<img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://www.forecastweather.gr/pilioxionodromiko/cam.php" width="794" height="448">



</body>
</html>

Έτσι το κάνει στο forecastweather @silve

Επεξ/σία 15 Δεκεμβρίου 2024 από octa

silve · 15 Δεκεμβρίου 2024

Σε ευχαριστώ πολύ για τη βοήθεια!! Θα το βάλω ως εικόνα!

Σύνδεση

Προσαρμογή εικόνας iframe

Προτεινόμενες αναρτήσεις

silve

octa

silve

octa

silve

octa

silve

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση