Element zoomen auf Bildschirm Höhe Breite ohne Verzerren für alle BildschirmTypen.

Hi. Wie kann man Elemente zB. Fotos Gif Video <iframe> automatisch anpassen/ zoomen auf komplette BildschirmHöhe vertikal 9:16 bzw. BildschirmBreite horizontal 16:9 und mittig ausrichten im jeweiligen RahmenElementZiel zB. Hintergrund für Seite, div oder span Boxen? Überstehende Ränder sind ok, können gern abgeschnitten werden oben/unten oder an den Seiten links/rechts, Hauptsache - Original getreu, ohne Verzerrung. - soll komplett bedecken, also weder längs noch seitlich zu kurzes Bild sein.

Der hier verwendete Code

<html> <head> <title>Welcome!</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ margin:0px; padding:0px; } body{ overflow:hidden; height:100vh; width:100vw; } .SlideBox{ height:100%; width:100%; background-color:rgba(16,32,128,0.1); background-repeat:no-repeat; } </style> </head> <body> <div class="SlideBox"> </div> <script> var myIndex = 0; var timer; carousel(); timer=setInterval(carousel, 5000); var bod=document.getElementsByTagName('body')[0]; bod.addEventListener('mousedown',function(){ clearInterval(timer); carousel(); }) bod.addEventListener('mouseup',function(){ timer=setInterval(carousel, 5000); }) function carousel() { var x=['https://basti1012.bplaced.net/image/2.png','https://basti1012.bplaced.net/image/3.png','https://basti1012.bplaced.net/image/4.png','https://basti1012.bplaced.net/image/5.png','https://basti1012.bplaced.net/image/6.png','https://basti1012.bplaced.net/image/7.png']; myIndex++; if (myIndex > x.length) {myIndex = 1} var box=document.getElementsByClassName("SlideBox")[0]; box.style.background='url('+x[myIndex-1]+')'; box.style.backgroundSize='cover'; } </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!