Frage <a> passt sich nicht der Größe von <img> an

[TheUser1992]

Ich komme da irgendwie nicht weiter. Egal, was ich mache, sieht es entweder im Firefox, Chrome oder beidem falsch aus. Es geht um die fünf Bilder hier unter Cosplay. Ich möchte nicht jedes <img> bzw. <a> einzeln von der Größe an passen. Geht es auch irgendwie einfacher, dass es in jedem Browser so aussieht, wie im Bild?

 

[Aaron3219]

Ja mit einem Grid layout.
https://css-tricks.com/snippets/css/complete-guide-grid/

 

[TheUser1992]

Ah, vielen Dank. Das wird dann wohl einige Zeit dauern, bis ich da durch blicke. Hast Du zufällig auch eine deutsche Version eines solchen Tutorials parat? Ich bin schlecht in Englisch.

 

[Aaron3219]

https://blog.kulturbanause.de/2013/12/css-grid-layout-module/

Video:

 

[TheUser1992]

Es scheint mir gerade so, als müsste ich damit beinahe meine gesamte Webseite umbauen. Gibt es echt keine einfachere Lösung? Das kann ich mir gar nicht vor stellen. Warum passt sich in Chrome das <a> denn eigentlich nicht dem <img> an?

 

[Aaron3219]

Nein musst du nicht. Es reicht, dass CSS zu verändern (und evtl. einen kleinen Teil html)

 

[TheUser1992]

Ich bringe mir solche Dinge immer selbst bei. Das braucht einiges an Zeit, bis ich weiß, was ich genau verändern muss, wenn es sich um so ein komplett neues System handelt. Das Problem ist nur, dass ich gerade nicht so viel Zeit habe, bis zu der es fertig sein soll. Ich möchte einfach nur, dass die <a>‐Rahmen genauso breit sind, wie die verkleinerten Bilder.

 

[TheUser1992]

bzw. dass die Bilder im Chrome richtig skaliert werden…

 

[Aaron3219]

Okay also:

#Cosplay img {
   height: 200px;
   width: 200px;
}

Ich kann dir wirklich nur raten, dich mit Flexboxen und Grid zu beschäftigen. Besonders Flexboxen!!!!
Flexboxen werden dein Leben 1000 Mal einfacher machen.
http://www.on-design.de/tutor/html5_css3/css3/flexbox.html

 

[TheUser1992]

Die Bilder sollen nicht alle 200 Pixel breit sein. Wie kommst du darauf? Die Bilder sollen alle auf zwei Drittel Größe verkleinert werden, sowohl in Breite, als auch Höhe. Die Höhe geht dann bei allen Bildern von 300 auf 200 Pixel. Allerdings sind die Bilder alle unterschiedlich breit.

Wenn ich die Breite in CSS auf 100% stelle, sieht es in Firefox richtig aus und in Chrome behalten die Bilder ihre Originalbreite.

Wenn ich es auf 66.66% stelle, werden die Bilder in Firefox schmal gedrückt; in Chrome sind die Bilder dann richtig, allerdings bleiben die <a>-Boxen so breit, wie das Bild original ist, passen sich also nicht an.

Wenn ich im CSS gar keine Breite angebe, wird die Breite aus einem anderen CSS‐Tag übernommen. Alle Bilder werden also auf 118 Pixel Breite gesetzt.

Ich habe es jetzt erst mal provisorisch manuell gemacht. Das gefällt mir allerdings gar nicht:

#Cosplay img{height:200px}
#Cosplay li:nth-child(2) img{width:92px}
#Cosplay li:nth-child(3) img{width:66px}
#Cosplay li:nth-child(4) img{width:116px}
#Cosplay li:nth-child(5) img{width:208px}
#Cosplay li:nth-child(6) img{width:108px}

 

[TheUser1992]

Oh, da litt ich wohl an Gedächtnisverlust, dass ich darauf nicht gekommen bin. xD