• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Bild verzerrungsfrei an Monitorauflösung anpassen (mit Bildwechsel alle 5 Sekunden)

S

schlegel.berlin

New member
Liebe Leute,

für nachstehend geschilderte Aufgabenstellung hab ich noch keine zufriedenstellende Lösung:

Ich habe auf einer Hompage (für eine gute Freundin) eine Startseite mit bildfüllendem Foto, das bei einer Aufllösung von z.B. 1024 x 768 auch richtig dargestellt wird.
(siehe beigefügter Sreenshot 104x768.jpg)

Bei einer Auflösung von z.B. 1280 x 720 bleibt das Bild in horizontalen Aufllsung identisch, vertkal wird es aber notwendigerweise symmetrisch oben und unten beschnitten, wird also verzerrungsfrei (richtiges Seitenverhälntnis) abgebildet
(siehe beigefügter Screenshot 12080x720.jp)

Das ist auch soweit gut und wie von mir beabsichtigt.

Den transparenten Streifen habe ich in mittels CSS wie folgt definiert:
Code: 
#strip {
Z-INDEX: 9999; POSITION: absolute; WIDTH: 100%; BOTTOM: 20px; LEFT: 0px
}
#strip DIV {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: #000; HEIGHT: 50px; PADDING-TOP: 0px; OPACITY: 0.3;FILTER: alpha(opacity=30);
}
Der Text "schlegel.berlin" in dem horizontalen Balken ist wie folgt definiert (unter Einbindung eines Google -Webfont)
Code: 
H1 {
POSITION: relative; WIDTH: 100%;margin-bottom:-30px; color:white;font-size:32px;TEXT-ALIGN:right;font-family: 'Muli';
}
Dsa funktiniert auch wie es soll - beinahe.

Nun habe ich eben 2 Probleme, deren Lösung mir schwer fällt (ich krieg's halt bisher nicht hin):

a) Z.B. im IE sieht es so aus wie es soll. Im Firefox dagegen hat die Schrift die gleiche Transparenz wie der Querbalken (siehe beigefügter Screenshot firefox_ausschnitt.jp)

b) Bei einer weiteren Aufgabenstellung habe ich auch ein Problem:
Alle 5 Sekunden wird die Seite neu geladen (mittels <META HTTP-EQUIV="refresh" content="5;URL=meine seite">
Dabei "zuckt das Bild kurz für einige ms (es ist zunächst etwas größer als der Monitor und wird dann auf die richtige Größe skaliert).
Die Übergänge von Bild zu Bild sind daher unsauber und unschön.

Das alles bedeudet in der Kosequenz, dass das so eben nicht geht und ich am Besten nicht weiter an dem vorhanden Script "herumdoktere", weil ich da wahrscheinlich ohnehin viel zu kompliziert ran gegangen bin, sondern mir von Euch helfen lasse (und dabei auch wieder etwas lerne, so hoffe ich...)

Ich bin sicher, dass eine/r von Euch da eine praktikable und einfache Lösung hat.

Vielen Dank schon mal im Vorausund
LG, Karin

firefox_auschnitt.jpg1024x768.jpg1280x720.jpg
 
Zuletzt bearbeitet von einem Moderator:
Du lädst die komplette Seite neu nur um ein Bild zu wechseln? Warum machst du das nicht mit JS?

Das mit der Transparenz ist für mich logisch: wenn ich ein Element durchscheinend mache, sollen auch alle Elemente darin durchscheinend sein. Der IE macht aus meiner Sicht da was falsch.
Um das zu umgehen, darfst du einfach nicht mit opacity arbeiten, sondern musst die Hintergrundfarbe im rgba-Format angeben - bei dir also rgba(0, 0, 0, 0.3). Funktioniert auch im IE >= 9.
 
Hallo kkapsner,

danke für die schnelle Antwort (War mal eben weg und habe sie erst jetzt lesen können ...)..

1. Du hast natürlich absolut Recht mit Deinem Hinweis auf "js". Mit "<META HTTP-EQUIV="refresh" ..." ist eh blöd, weil unter Umständen z.B. der Firefox um "Erlaubnis" fragt, ob er denn wirklich "refreschen" soll ..., also hab ich es jetzt mit js erledigt. Viel besser!

2.) das mit dem CSS-Tipp funktioniert bestens. Vielen Dank dafür. Wusste ich nicht und hab wieder was gelernt :))

3.) In meinem Post schrieb ich: "Dabei "zuckt das Bild kurz für einige ms (es ist zunächst etwas größer als der Monitor und wird dann auf die richtige Größe skaliert). Die Übergänge von Bild zu Bild sind daher unsauber und unschön."

Worum es mir geht ist, dass die wechselnden Fotos auf die jeweilige Seitengrpße "skaliert" werden.
Die Fotos haben eher 4:3 als 16:9 Seitenverhältnis.
Das bedeutet, das bei 16:9 oder anderen "Breitwand"-Monitoren die Bilder jeweils oben und unten zentriert abgeschnitten werden sollen.

Ich habe da nur mit js hingekriegt.
In css schaffe ich es nicht, dass auch "zentriert" beschnitten wird.
Wenn ich das per css versuche, wird alles was "zu hoch" ist, unten abgeschnitten.

Das liegt sicher an meinen magelhaften CSS Kenntissen.
Hast Du da einen guten Rat?

LG, Karin

PS: Die Domain (im Link oben) führt zur "alten" Webseite" meiner Freundin, mit der Sie schon lange unglücklich ist und die ich ihr z.Zt. - nach ihren Wünschen und Vorlagen - neu mache. Und wie das unter Freunden so ist, es ist halt ein reiner Freundschaftsdienst :)
 
Zuletzt bearbeitet:
Du hast mich falsch verstanden. Ich meinte nicht, dass du das Neuladen mit JS machen sollst, sondern mit JS das Bild austauschen. Also du erzeugst dir ein Image-Objekt, registrierst einen onload-Eventlistener, der dann das <img> im DOM anpasst (src, Höhe und Breite - die Originalgröße des Bildes hast du da schon verfügbar über das Image-Objekt), und dann weißt du dem .src-Attribut des Image-Objekts den neuen Wert zu.

Das sollte dann auch das "Zucken" beseitigen - außer beim Laden der Seite.
 
Hi kkapsner,

offensichtlich hatte ich Dich falsch verstanden, aber das Neuladen mach ich dennoch (auch) besser per JS.
Dein Denkanstoß bzgl. des Image-Objekts war "genial". Ich habs jetzt so gemacht und es "zuckt" nicht mehr dafür "funzt" es bestens ..

Danke, danke, danke, und LG, Karin

PS: Den Link, den ich zu Demozwecken gepostet hatte, bzw. das Verzeichnis zu dem er führte, habe ich zur "Müllvermeidung" aufdem Server wieder entfernt ...
 
Zuletzt bearbeitet:
Bitte - gern geschehen.

Zu PS: ist OK - wäre noch gut, wenn du hier deinen endgültigen Code zeigen könntest. Für kommende Suchende... und ev. findet jemand noch Schönheitsfehler.
 
Bin grad unterwegs und erst am kommendne Dienstag oder Mittwoch wieder in Berlin.
Dann hole ich das nach. Jetzt hier vom Smartphone aus geht's zum einen nicht, weil ich den Code ja nicht mir mir herumschleppe und zum anderen ist das Scheiben so mühsam .. :)

LG, Karin
 
===========================

Schei...:
Gestern hat mich ein Auto erwischt. Glück hegabt, hätte schlimmer ausgehen können, aber trotzdem erstmal 2 - 3 Wochen im KK. Kniegelenk kaputt. Erstmal einige Tage Gipsbett, bis die Schwellung komplett weg ist ... und dann schaun'n mer mal ...

Schreib das grad mit einem vom Bettnachbarn geliehenen Laptop über'n WLAN im KK ...

Was ich mit all dem sagen will: Das "Ganze" muss (leider) noch warten ...
 
So, da bin ich wieder...
Also, die ursprünglich gepostete Aufgabenstellung, für die ich eine Lösung suchte, ist inzwischen (anders als ursprünglich angedacht) erledigt und ich möchte sowohl Aufgabenstellung als auch deren Lösung noch mal kurz posten (vor allem für newbies).

Aufgabenstellung:
  • Ein Hintergrungbild bildfüllend und verzerrungsfrei, unabhängig von der Montorauflösung, abbilden und das Bild alle z.B. 10 Sekunden wechseln (OHNE den Einsatz von Flash).
  • Das dargestellte Hinterund-Bild soll dabei aus 10 vorhandenen Bildern zufällig ausgewählt werden.
  • Ein kleiner, auf dem Monitor ausgegebener Countdown soll dem Betrachter singnalisieren, dass da irgendein Ereignis nach Ablauf der, im Beispiel gezeigten, 10 Sekunden stattfindet (Der Bildwechsel nämlich).
  • Mit einem Klick, irgendwo auf das Bild, soll der Besucher dann zur eigentlichen Startseite der Webseiten gelangen.
Anmerkungen:
a) Die benutzen Bilder haben bei mir eine Größe von 1900 (Breite) x 1265 (Höhe) Pixeln.
b) Die Bilder sollten vorgeladen werden, damit sie beim Bildwechsel auch zur Verfügung stehen (Das Vorladen ist im Quelltext nicht intergriert. Dafür gibt es diverse, leicht zu findende Wege).

Die Lösung:
Ich habe den Quelltext veresucht so zu vereinfachen, dass er auch von "newbies" gut gelesen und verstanden werden kann (So hofffe ich jedenfalls), denn die Profis unter Euch, benötigen für die kleine Aufgabenstellung meine Lösung sicher nicht. Sie werden (vielleicht oder sogar wahrscheinlich) selbst eine bessere haben...

Hier ist nun die komplette Lösung und ich hoffe, dass irgendjemand etwas damit anfangen kann :)
PHP: 
<?

/*  Zufalls-Zahl zwischen 0 und 9 erzeugen */
 function randomString($len) { 
function make_seed(){ 
list($usec , $sec) = explode (' ', microtime()); 
return (float) $sec + ((float) $usec * 100000); 
} 
srand(make_seed()); 

$possible="1234567890"; 
$str=""; 
while(strlen($str)<$len) { 
$str.=substr($possible,(rand()%(strlen($possible))),1);  
} 
return($str); 
} 
//Ausgabe Zufallszahl zwischen 0 und 9
$startbild_nummer = randomString(1); 

// Die Zufallszahl 2-stellig machen
$startbild_nummer = str_pad($startbild_nummer, 2 ,'0', STR_PAD_LEFT);

//Zuordnung der Hinergrundbilder zur erzeugten Zufallszahl (gegebenenfalls dei Pfade zu den Bildern angeben)
if($startbild_nummer == "00"){$current_image = "bild1.jpg";}
if($startbild_nummer == "01"){$current_image = "bild2.jpg";}
if($startbild_nummer == "02"){$current_image = "bild3.jpg";}
if($startbild_nummer == "03"){$current_image = "bild4.jpg";}
if($startbild_nummer == "04"){$current_image = "bild5.jpg";}
if($startbild_nummer == "05"){$current_image = "bild6.jpg";}
if($startbild_nummer == "06"){$current_image = "bild7.jpg";}
if($startbild_nummer == "07"){$current_image = "bild8.jpg";}
if($startbild_nummer == "08"){$current_image = "bild9.jpg";}
if($startbild_nummer == "09"){$current_image = "bild10.jpg";}

?>
Hinweis für "newbies":
Im Quelltext der Seite folgt unmittelbar auf das oben gepostete PHP Script, der nachstend gepostete HTML-Code, wobei ich empfehle, das die Styleanweisungen im HTML-Code z.B. als volbildd.css auszulagern und dann wie folgt zu implementieren: <link rel="stylesheet" type="text/css" href="volbild.css" />
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Bilfüllende Hintergrundbilder alle paar Sekunden wechseln</title>

<style type="text/css">
html, body
{
overflow:hidden;
font-size: 1em;
font-family:Helvetica, sans-serif;
margin: 0em;
padding: 0em;
background: #fff;
color: #000;
}

a:link
{
color: #00f;
}

div#rest
{
position: absolute;
top: 0em;

right: 0em;

overflow: hidden;
padding: 1em;
}

div#inhalt
{
text-align:right;
}

img#bg
{
position: fixed;
top: 0em;
left: 0em;
width: 110%;
height: auto;
}

#display{font-family:tahoma,arial,sans-serif;color:#CBE3ED;font-size:12px;background-color:#75A4B7;text-align:center;height:15px;width:20px;border:solid 1px #2B5F75;text-decoration:none}
</style>

<script type = "text/javascript">
{
var zaehler = '10';//Die Zeit (in Sekunden), nach der das bildfüllende Hintergrundbild wechselt
window.setTimeout( 'counter()' , 1000 );
function counter()
{
/* countdown für Bildschirmausgabe */
if (zaehler != 0){document.all['display'].innerHTML = zaehler;
zaehler = zaehler - 1;window.setTimeout('counter()',1000 );
if(zaehler < 1){location.reload();}
}
}
}
</script>
</head>

<body id="body">
<!-- mit click irgendwo auf das Bild zur Starseite per href -->
<a href="deine startseite">

<!-- Das aktuelle, per PHP gwählte Hintergundbild -->
<img src="<? echo $current_image; ?>" width="1" height="auto" title="Klicken Sie irgendwo auf das Bild" alt="Klicken Sie irgendwo auf das Bild" id="bg"  border="0" style="cursor:pointer" />

<div id="rest">
<div id="inhalt"><div style="text-align:right;">

<div align="right">
<div id='display' style="text-decoration:none;"></div>
</div>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
</div>
</div>
</div>
</a>
</body>
</html>
 
Das war keine Mühe, es war nur die Einlösung eines Versprechens :)

Mühe ist das, was ihr Euch ab und an mit mir macht :)

- - - Aktualisiert - - -

Jezt poste ich doch noch mal eine einfache Möglichkeit die Bilder vorzuladen, für jene (newbies), die da vielleicht noch ein bischen hilflos sind (es gibt aber, wie im ursprünglichen post schon geschrieben, auch diverse andere Möglichkeiten, z.B. per Javascript):

HTML: 
<body id="body">
<a href="home_start_b.php">
<img src="<? echo $current_image; ?>" width="1" height="auto" title="Klicken Sie irgendwo auf das Bild" alt="Klicken Sie irgendwo auf das Bild" id="bg"  border="0" style="cursor:pointer" />
<div id="rest">
<div id="inhalt"><div style="text-align:right;">
<div align="right">
<div id='display' style="text-decoration:none;"></div>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
</div>
</div>
</div>
</a>

<!-- Bilder vorladen -->
<img src="bild1.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild2.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild3.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild4.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild5.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild6.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild7.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild8.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild9.jpg" alt="" style="display:none;" width="1" height="1" />
<img src="bild10.jpg" alt="" style="display:none;" width="1" height="1" />
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Ist das unterhalb von "uprsprünglicher post" das selbe wie in Beitrag 11? Wieso hast du das nochmal wiederholt?
 
Du hats völlig Recht. Sorry, keine Ahnung wo ich da mit meinem Kopf war...
Wenn Du die Möglichhekit hast, dann schmeiß es doch bitte wieder raus, wäre echt nett.
Es würde meine "Blödheit vertuschen" ... :)

LG, Karin
 
Ich verstehe nicht ganz, warum du das mit dem zufälligen Anfangsbild so kompliziert machst:
PHP: 
<?
$images = array("bild1.jpg", "bild2.jpg", "bild3.jpg", "bild4.jpg", "bild5.jpg", "bild6.jpg", "bild7.jpg", "bild8.jpg", "bild9.jpg", "bild10.jpg");
$current_image = $images[mt_rand(0, count($images) - 1)];
?>

Auch ist dein HTML invalide (enthält z.B. keine DocType) und enthält einige Elemente, die nutzlos sind (z.B. die <table>).

Das JS hat auch einige Ecken:
  • Warum definierst du zaehler als String?
  • Warum packst du deienn Code in einen Block? Der bewirkt nichts. Auch keinen neuen Scope, da JS keinen Blockscope, sondern nur Funktionsscope hat.
  • Damit ist zaehler eine globale Variable...
  • window.setTimeout() sollte man keinen String als Parameter übergeben.
  • Die document.all Kollektion ist auch nicht empfehlenswert. Verwende doch gleich document.getElementsById().
  • Zu guter Letzt ist, wie ich oben schon gemeint hatte, aber anscheinend nicht rübergebracht habe, der komplette Reload unnötig. Du kannst die src vom <img> auch mit JS tauschen.

PS: So wie ich das sehe, ist das Bild nicht bei allen Browserfenstergrößen füllend...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben