Bildpositionierung in einer lightbox

[Froschgott]

Hallo Gemeinde,

ich habe folgendes Problem: auf meiner Internetseite habe ich eine Gallerie mit Slider und lightbox, die sich per Klick auf die einzelnen Bilder öffnet. Das Problem ist, dass nur Bilder im Querformat richtig angezeigt werden. Bilder im Hochformat werden zwar auch angezeigt, aber nur Ausschnitte davon. Also ich habe quasi in der Gallerie Rahmen für Querformatbilder, in denen die Bilder komplett ausgefüllt werden, aber Hochformat wird logischerweise nicht komplett angezeigt. Ich würde gerne die Hochformatbilder einfach etwas anders positionieren, das würde mir schon reichen. Im HTML sieht das so aus:

<div class="swiper-slide gallery-slide gallery-slide-01">
<a data-gall="inner-gallery" href="images/gallery/people/01.jpg" class="image-lightbox-link">
<img src="images/zoom.png" class="valign " title="" alt="">
</a>

und im CSS so:

.gallery-slide-01{
background-image: url('../images/gallery/people/01.jpg');
}

Im Anhang ist ich noch ein Screenshot, vielleicht ists dann besser nachzuvollziehen. Auf diesem sieht man links ein Bild im Querformat und rechts eins im Hochformat, was nicht so gut angezeigt wird.

Grüße

 

[Tronjer]

Dazu müssen die betreffenden Bilder eine CSS Klasse mit den entsprechenden Attributen erhalten.

 

[Froschgott]

Also wenn ich nur das einzelne Bild anders positioniere, auch über eine extra Klasse, passiert im besten Fall folgendes (siehe Anhang). Hab nur das Bild mal relative positioniert, leider wird da was abgeschnitten.

 

[Froschgott]

Hilfe?

 

[threadi]

Wo kann man sich das anschauen? Link?

 

[Froschgott]

Auf den Screenshots. Befindet sich momentan auf einem Testserver und würde ich nur ungern weitergeben.

 

[threadi]

Dann kann man dir leider kaum helfen :/

 

[Froschgott]

Hmm, na gut. Aber eigentlich geht es ja um die Positionierung, nicht die Funktion der lightbox. Das funktioniert alles.

http://froschgott.bplaced.net/Leon/fotografie.html

Um diese Gallerie geht es.

 

[threadi]

Bei mir ist da nichts abgeschnitten so wie in deinem Screenshot. Welchen Browser hast Du? Klickst Du evtl. auf irgendetwas bevor es diese Ansicht gibt?

 

[Froschgott]

Ach so, nee nee, das habe ich auch wieder Rückgängig gemacht. Also hatte eine Klasse zusätzlich erstellt, in der das einzelne Bild relative gesetzt und etwas nach oben geschoben. Leider ist, wie auf dem Screenshot, das Bild zwar hochgewandert wie gewünscht, aber komischerweise der Rest des Bildes nicht mit, sodass so ein weisser Streifen entstanden ist.

 

[threadi]

Dann zeig bitte den Versuch bei dem es Probleme gibt ...

 

[Froschgott]

Ach, war auch der falsche Link, sehe ich gerade.

http://froschgott.bplaced.net/Leon/people.html

Also habe hier im HTML einfach noch die Klasse "position" hinzugefügt.

<div class="swiper-slide gallery-slide gallery-slide-02 position">
<a data-gall="inner-gallery" href="images/gallery/people/02.jpg" class="image-lightbox-link">
<img src="images/zoom.png" class="valign " title="" alt="">
</a>
</div>

und im css eine Klasse erstellt:

.position{
position:relative;
top: -100px;
}

Und folgendes passiert.

 

[Froschgott]

Hat jemand eine Idee?

 

[threadi]

Wenn ich das von dir hier geschriebene auf der Seite unter deinem Link, in dem das nicht enthalten ist, hinzufüge sehe ich nicht die Ansicht wie in deinem Screenshot. Bitte nochmal: poste einen Link bei dem das Problem ersichtlich ist.