• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fotoalbum (Bildbreite und Höhe immer gleich)

I

iloveratte

Neues Mitglied
Hallo
Ich suche eine möglichkeit wie auf Facebook, und zwar sollen alle Bilder (die ich dann automatisch lade) alle die gleiche Grösse (breite und höhe) haben beim anzeigen, natürlich ist ja nicht jedes Bild gleich gross, (die einten sind im queerformat die anderen nicht).
daher müsste das Bild zentriert in einem "container" geladen sein. zudem einen dünnen rahmen rundherum.. versteht ihr was ich meine?
Danke für eure lösungsansätze..
 
Hallo,

was du meinst ist klar. Ohne konkrete Angaben ist nur ein Lösung schwerlich zu konstruieren.

Allgemein: Die Bilder werden in ein Block-Element eingebettet, dem ein Rahmen und eine Hintergrundfarbe zugewiesen werden. Außerdem eine Höhe und Breite die mindestens das höchste und das breiteste Bild einschliessen.

Ich persönlich bevorzuge dafür z. B. Definitonslisten, da die vielfältig formatiert werden können und ich Bilder mit Bildunterschriften bevorzuge. Aber du kannst natürlich auch zu anderen Blockelementen greifen.

Gruss

MrMurphy
 
Hier mal als Anregung
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<title>Vertikal zentrieren mit :after oder :before</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}

html, body  {
 height: 100%;
}

body {
 text-align:center;
}

body:after  {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%; 
}
 
.box {
 padding:10px;
 display:inline-block;
 border:1px solid #000;
 vertical-align:middle;
}


</style>
</head>

<body>
 <div class="box">
  <img src="bild.jpg" alt="" title="Bild1" width="570" />

 </div>
</body>
</html>

Die Body-Deklaration musst du durch dein div ersetzen.
 
Abgesehen vom Style zu dieser Herausforderung solltest Du auch bedenken, dass Du die Grafikdateien im Idealfall auch auf die anzuzeigende Größe bringen solltest. Ein 1024 Pixel breites Bild per Style auf 750 Pixel zu bringen heißt für denjenigen der die Seite aufruft, dass er dennoch die vollen 1024 Pixel als Bytes laden muss - das kann je nach Bild- und Dateigrößen schon extrem sein und auch deinen Traffic erhöhen. Du solltest also entweder die Fotos manuell auf die anzuzeigende Größe bringen oder ein serverseitiges Script (PHP) dafür verwenden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben