Archiv-Modus von Basti1012 Lösungspage

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, <img class="vorschau" src="/image/elementzoomen.png" alt="bild"> Hauptsache - Original getreu, ohne Verzerrung. - soll komplett bedecken, also weder längs noch seitlich zu kurzes Bild sein.

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=['/image/2.png','/image/3.png','/image/4.png','/image/5.png','/image/6.png','/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>

basti1012.bplaced.net

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

Code