Bild 100% mittig

**elukas** · 19.09.2010, 19:39

Hallo Sabri und Contao-Freunde,

ich hätte gerne gewusst ob das Vorschaubild irgenwo auf 100% einstellbar ist in irgendeiner
datei, hab leider nichts gefunden wo könnte diese Einstellung sein...

Vorschaubild hat einen Rahmen mit 100x100 pixel
und darin soll das Bild 100% mittig eingesetzt werden können
das eigentliche Bild in der Lightbox hat 640x480

liebe grüße
elukas

**Andreas** · 19.09.2010, 23:03

100% von was? Qualität? Oder möchtest du das Original-Bild, in Original-Größe, zentriert in einer Box von 100x100px darstellen?

Grüße

**elukas** · 19.09.2010, 23:34

Hallo Andreas,

ja ich möchte das originale Bild also 100% in der Box 100x100
mittig darstellen... so das nur der mittlere Bereich gezeigt wird.
Wenn das Bild dann anklickt soll das ganze sichtbar sein.

Lg elukas

**Andreas** · 19.09.2010, 23:47

Dann versuch mal keine Werte für die Thumbs einzutragen, dann müsste schon mal das Original im FE erscheinen. Nun versuche dein Ziel mit der CSS-Eigenschaft 'clip' zu lösen. Sobald du Werte für die Thumbs einträgst werden sie natürlich auch in der gewünschten Größe erzeugt, was du ja nicht möchtest.

http://de.selfhtml.org/css/eigenscha...erung.htm#clip

Grüße

**elukas** · 24.09.2010, 16:01

Hallo Andreas,

sorry war die ganze Woche ohne Internet...

Hab versucht Deine Idee umzusetzen aber ich hab leider kein erfolgreiches Ergebnis erreicht muss mir wahrscheinlich was anderes überlegen... vielen Dank für Deine Hilfe

Liebe Grüße
elukas

**Andreas** · 24.09.2010, 21:45

Da fällt mir grad auf, wir sind ja im Forum imagerotator/-slider. Sollte dir folgendes nicht hilfreich sein, dann sag einfach Bescheid. Ich verschiebe es dann in ein anderes Forum.

So, ich hab das mal probiert. Hier das Ergebnis.

Vorher:
BE->be_before.jpg FE->fe_before.jpg

Nachher:
BE->be_after.jpg FE->fe_after.jpg

Und hier noch das CSS für 'Nachher'.

Code:

.ce_gallery td {
  height: 176px;
  padding: 24px 24px 0 0;
  vertical-align: top;
}
.ce_gallery .image_container {
  position: relative;
  width: 200px;
  height: 140px;
}
.ce_gallery .image_container a {
  display: block;
  position: absolute;
  height: 140px;
  width: 200px;
  left: 0;
  top: 0;
  overflow: hidden;
  clip: rect(0px, 200px, 140px, 0px);
}
.ce_gallery img {
  margin: -105px 0 0 -150px;
}
.ce_gallery .caption {
  position: absolute;
  left: 0;
  top: 140px;
}

Jetzt ist das Thumb und das Bild in der Mediabox ein und dasselbe. Das hat den Vorteil, dass die Bilder für die Großansicht bereits geladen sind, was gleichzeitig natürlich auch ein Nachteil ist, da die Pseudo-Thumbs ja länger zum laden brauchen.

Grüße