Problem mit Bildergrösse in Link

[blubberli]

Hallo Zusammen,

Ich habe eine Seite, auf der ich die Bilder nebeneinander darstellen möchte, dazu verwende ich Flexbox. Jedes Bild soll eine höhe von 100% haben. Solange ich nun Bilder nebeneinander mache funktioniert dies sehr gut. Wenn ich jetzt aber die Bilder in einem Link habe funktioniert dies nicht mehr es passiert folgendes.

• Die Höhe wird korrekt angepasst.
• Die Breite des Link element besitzt die Breite der originalgrösse des Bildes (sollte die breite des Skalierten Bildes sein) Deshalb überlagern sich die Bilder oder es gibt grosse Abstände zwischen den Bildern.

Hier die HTML einbindung:

<a href="ZIELSEITE"><img src="MEINBILD" class="piclink"></a>

Das dazugehörige CSS:

a
  {
    height: 100%;
    width: auto;
    padding-right: 25px;

  }
  .piclink
  {
    height: calc(100% - 200px);
    width: auto;
  }

Kann mir jemand helfen?

[MrMurphy1]

Hallo,

ohne Link zur Seite werden wir dir leider kaum helfen können. Und mehrmals nachfragen um alle relevanten Informationen zu erhalten steigert die Hilfsfreude nicht grade.

Gruss

MrMurphy

[blubberli]

Ich habe nun mal alles als Beispiel auf einen Server geladen.

http://kettela.ch/forum/

Auf der ersten Ebene, Überlagern sich die zwei Bilder, da sie in echt sehr klein sind. Wenn nun auf ein Bild geklickt wird, kommt ihr auf eine Ebene wo die Bilder keine Links sind und da wird alles korrekt dargestellt.

[Der Martin]

Hallo,

Jedes Bild soll eine höhe von 100% haben.

was heißt das? 100% wovon?
Und dein CSS-Schnipsel widerspricht dieser Aussage: Dort legst du 100% - 200px fest.

Solange ich nun Bilder nebeneinander mache funktioniert dies sehr gut. Wenn ich jetzt aber die Bilder in einem Link habe funktioniert dies nicht mehr es passiert folgendes.

• Die Höhe wird korrekt angepasst.
• Die Breite des Link element besitzt die Breite der originalgrösse des Bildes (sollte die breite des Skalierten Bildes sein)

Deshalb überlagern sich die Bilder oder es gibt grosse Abstände zwischen den Bildern.

Schwer nachzuvollziehen, so ohne Live-Beispiel.

<a href="ZIELSEITE"><img src="MEINBILD" class="piclink"></a>

a
  {
    height: 100%;
    width: auto;
    padding-right: 25px;

  }
  .piclink
  {
    height: calc(100% - 200px);
    width: auto;
  }

Wieso legst du für das a-Element auch Maße fest? Lass sie einfach weg, dann passt sich das Element automatisch dem Inhalt an. Abgesehen davon tut es das auch so: Denn width oder height sind bei inline-Elementen sowieso ohne Wirkung. Das padding-right wirkt allerdings.

Kann mir jemand helfen?

Beschreibe, was du eigentlich erreichen willst. Ich habe den Eindruck, mit dem Ansatz bist du auf dem Holzweg, da findet sich bestimmt eine bessere Alternative.

So long,
 Martin