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.
Kommentar abgeben zu diesen Beitrag/Code ?
Hauptsache
- Original getreu, ohne Verzerrung.
- soll komplett bedecken, also weder längs noch seitlich zu kurzes Bild sein. Dann hier klicken
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=['/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>