Beiträge von Lemke

Lemke · 16. Februar 2020

So siehts aus, Script vereinfacht auf nur 1 Seite als Ziel, mit nur 1 Bild

html-seminar.de/woltlab/attachment/2192/

Hier der neue vereinfachte Code zum testen

HTML

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>TestBild</title>
</head>

<body style="
    margin: 0px; 
    background: #0e0e0e;
">

<img style="
    object-fit: cover;
    background-size: cover;
    " 
src="TestBild.jpg"> 

</body></html>

Alles anzeigen

Falls es bei dir geklappt hat, teile mal deinen Code! Dann probier ich es mit dem TestFoto.
Wette aber es ist selbes Ergebnis, schwarze Ränder, statt VollBildschirm [./?]

Wär interessant.

Lemke · 16. Februar 2020

Css IST KORREKT EINGEBAUT! Dein Code klappt nicht, es bleiben (schwarze/ je nach HintergrundFarbe) -Ränder.

Soll ohne Rand zoomen so dass die längere Weite von entweder Höhe oder an Breite -angepasst wird, über den Rand des Ausschnitts hinaus, so wie ich das illustriert hab.

Lemke · 15. Februar 2020

Hi. Habe ein Script, das kann Grafiken nacheinander laden.
Grafiken werden noch nicht ohne Verzerrung auf vollen Bildschirm 16:9 und 9:16 -geladen, ...ist also noch nicht perfekt.
Aber funktioniert schon mal soweit, dass Bilder laden nacheinander, und man kann ZeitIntervall einstellen.

Wie kann man das so modifizieren, dass man nächstes Bild/ Folie per Klick sofort laden kann?

Danke!

Hier das Script (ab Zeile 26)_

HTML

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

<body lang="DE" style="
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .SlideBox {margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative;}
    .SlideIntro {margin: 0px;min-width: 100%; height:100%;margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; background-size: cover;} 

">

<div class="SlideBox">
    <img class="SlideIntro" src="Klima.jpg">
    <img class="SlideIntro" src="SwimPool.png">
    <img class="SlideIntro" src="Solar.jpg">
    <img class="SlideIntro" src="HausGarten.jpg">
    <img class="SlideIntro" src="SaunaWellness.jpg">
    <img class="SlideIntro" src="Karte.png">
</div>


<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("SlideIntro");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 7000); // Change image every 7 seconds
}
</script>

</body>
</html>

Alles anzeigen

So siehts im Moment auf dem Bildschirm aus_

html-seminar.de/woltlab/attachment/2189/

Lemke · 15. Februar 2020

Frage ist nicht wie man Css einbaut, sondern Welches Css passt für speziell diese Herausforderung?_

- Bilder Gif Videos iframe... sollen vergrößert werden/ zoomen auf RahmenElement rundum / bzw. Seite,

- sollen horizontal mittig angeordnet werden,

- sollen nicht verzerrt werden aber dennoch

- ohne Ränder!

Ist natürlich offensichtlich dass irgendetwas falsch und oder unvollständig ist.

---> Frage weiter offen.

Css sollte korrekt eingebaut sein. Funktioniert, soweit, allgemein für die Seite, aber leider nicht für die Bilder des Sliders.

Sie wisen sicher es gibt mehrere Möglichkeiten Css ein zu bauen, entweder auf externem CssDokument oder im Header,
oder wie ich es bevorzuge zusammen mit den jeweiligen Elementen im HtmlHauptDokument an Ort und Stelle, dass ich nicht 2 Dokumente öffnen muss und hin und her scrollen. Am liebsten sind Scrips auch gleich in 1 Dokument, wenn möglich alles jeweils als funktionale kompaktest-mögliche Einheit zusammen an 1em Platz!

zB. so

<div class="XYZ" style="

...dasleben-color:rgba(8,64,128,1.0);

...ist:relative;

... schön:100%;

">

Worin liegt Fehler in meinem Script, um die Bilder richtig an zu passen? Siehe hier (aktualisiert aber klappt noch nicht),

HTML

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

<body lang="DE" style="
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .SlideBox {margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative;}
    .SlideIntro {margin: 0px;min-width: 100%; height:100%;margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; background-size: cover;} 

">

<div class="SlideBox">
    <img class="SlideIntro" src="Klima.jpg">
    <img class="SlideIntro" src="SwimPool.png">
    <img class="SlideIntro" src="Solar.jpg">
    <img class="SlideIntro" src="HausGarten.jpg">
    <img class="SlideIntro" src="SaunaWellness.jpg">
    <img class="SlideIntro" src="Karte.png">
</div>


<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("SlideIntro");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 7000); // Change image every 7 seconds
}
</script>

</body>
</html>

Alles anzeigen

Noch mal vielen Dank!

Lemke · 14. Februar 2020

Danke. Klappt noch nicht. Hier mein Script inklusive Css

HTML

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

<body lang="DE" style="
    display: block;  
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .Content {margin-left: auto; margin-right: auto;}
    *, *:before, *:after {box-sizing: inherit;}
    .Display {position: relative;}
">

<div class="Content Display">
    <img class="SlideIntro" src="Klima.jpg" style="object-fit: cover; background-size: cover;">
    <img class="SlideIntro" src="SwimPool.png" style="object-fit: cover; background-size: cover;">
    <img class="SlideIntro" src="Solar.jpg" style="object-fit: cover; background-size: cover;">
    <img class="SlideIntro" src="HausGarten.jpg" style="object-fit: cover; background-size: cover;">
    <img class="SlideIntro" src="SaunaWellness.jpg" style="object-fit: cover; background-size: cover;">
    <img class="SlideIntro" src="Karte.png" style="object-fit: cover; background-size: cover;">
</div>


<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("SlideIntro");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 7000); // Change image every 7 seconds
}
</script>

</body>
</html>

Alles anzeigen

html-seminar.de/woltlab/attachment/2188/

html-seminar.de/woltlab/attachment/2187/

Lemke · 14. Februar 2020

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,

html-seminar.de/woltlab/attachment/2185/.

Hauptsache_

- Original getreu, ohne Verzerrung.

- soll komplett bedecken, also weder längs noch seitlich zu kurzes Bild sein.

LösungsAnsatz_
Die geringere Länge von Element soll auf maximum gezoomt werden!
Nur woher weis der Browser automatisch was ist die geringere Länge? Breite zu wenig im Vergleich zur RahmenBox, oder ist Höhe zu wenig von Element für Rahmen?
Habe versucht min-width:100% und min-height:100% aber das wird irgendwie nicht angewandt.

Wer kennt sich aus? Danke.

Beiträge von Lemke

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

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

Slider soll zusätzlich per Klick nächste Folie laden. Script

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

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

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