Probleme mit Fotos auf der Homepage

Guten Morgen Zusammen,

ich betreue die Homepage des Kindergarten meines Sohnes und habe ein Problem mit den Fotos des Teams.

Auf der Homepage http://www.zipfelmuetze95.de kann man recht mittig auf der Seite kann man Einzelfotos des Teams sehen.

Ihr seht bspw. bei den Wichteln, dass dort vier Fotos sind. Die ersten beiden und das letzte haben einen unschönen weißen Rand unter dem Foto. Beim dritten Foto ist dies so wie ich es haben möchte, ohne weißen Rand. Ich habe schon versucht, die Bilder von den Abmessungen her an das dritte Bild aus der Reihe anzupassen, brachte leider keinen Erfolg.

Der Code ist für alle Bilder gleich. Ich kopiere euch nachfolgend den Code des vorletzten und letzten Fotos aus der Reihe "Wichtel" hier rein, daran seht ihr, dass dieser identisch ist. Habt ihr Tipps oder Ideen?

</div>

</div>

<div class="wrapper_team"><img title="Sulav" src="images/Sulav.jpg" alt="Sulav" width="664" height="1000" />

<div class="team_info">

<h3>Sulav</h3>

<h4>Berufspraktikantin zur Erzieherin</h4>

<h5>Betriebszugehörigkeit seit 2023</h5>

</div>

</div>

<div class="wrapper_team"><img title="Dilan" src="images/Dilan_klein.jpg" alt="Dilan" width="664" height="1000" />

<div class="team_info">

<h3>Dilan</h3>

<h4>Erzieherin bei den Wichteln, Erzieherin, U3- Fachkraft</h4>

<h5>Betriebszugehörigkeit seit 2012, aktuell Beschäftigungsverbot</h5>

</div>

</div>

Zitat von Lui_brempt

Mobil auf meinem Handy nur das letzte mit Rand.

Hast du mal die Original-Bilder auf die Größe geprüft.

Sie werden durch den Code skaliert.

Wenn sie zu klein sind passt es nicht in die vorgesehene Box.

Guten Morgen,

ich hatte ein Bild, welches jetzt einen weißen Rand zeigt, bereits die Größe angepasst auf eines der Bilder, welches die Problematik nicht aufweist.

Leider bleibt der weißt Rand bestehen

Zitat von chr-hl

Hallo,

Ursache dürfte m.E. die unterschiedlichen Bildgrößen sein, die als Basis dienen.

btw: Empfehlung: Auf J4 umsteigen, keine Googlefonts von Extern laden

Christian

Alles anzeigen

Mit der Umstellung auf J4 bin ich vorsichtig, da ich von einer solchen Umstellung keine Ahnung habe und die Seite nicht zerschießen möchte

An der Fotogröße liegt es scheinbar nicht. Habe nochmal rumprobiert.

Zitat von Stef

Das Bild von Sulav, Lina und Bine musst du verkleinern auf:

800 x 1200 Pixel

Aktuell ist das Bild von Sulav:

2088 x 3259 Pixel

----------------

Die Empfehlung von chr-hl im #3 ist sehr wichtig, da es für Jooma 3 keine Sicherheitsupdate mehr geben wird.

Alles anzeigen

Und was ist mit den ersten beiden in der ersten Reihe "Wichtel".

Ich habe das Foto von Bine auf 800x1200 geändert. Es ist leider immer noch der weiße Rand unten drunter

Zitat von Stef

cmpunk85 ! Hast du es versucht gemäss #7 ?

Am besten alle Bilder auf 800 x 1200 bearbeiten.

Ich habe testweise das Bild von Bine auf 800x1200 verändert, der weiße Rahmen bleibt leider bestehen

Zitat von Stef

OK, und hast du schon mal versucht das Bild von "Bine" zu löschen und neu einzufügen ?

Ja, gerade eben. Leider ebenfalls mit dem gleichen Ergebnis. Ich habe ebenfalls einmal ein neues Bild eingefügt mit Bine, ebenfalls mit weißem Rand.

Zitat von chr-hl

Mein Vorschlag

style.css Zeile 275 anpassen

.teamfotos img {

width: 100%;

height: 100%;

}

Christian

Alles anzeigen

Guten Morgen, habe ich geändert. Jetzt habe ich bei allen Bildern nach unten keinen Rand mehr, sondern Rechts einen weißen Rand der nun überall gleich ist.

Der Code in der Style.css sieht folgendermaßen aus, kann ich den Rahmen irgendwie passend machen?

.teamfotos img {
width: 100%;
height: 100%;
}


.wrapper_team {
margin-bottom: 30px;
border: 5px solid #dfc69c;
width: calc(24% - 8px);
margin-left: 1% !important;
height: auto;
overflow: hidden;
transition: 0.4s;
position: relative;
z-index: 9997;
}


.wrapper_team:hover .team_info {
transition: 0.4s;
opacity: 1;
}


.team_info {
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
background: rgba(255,255,255,.8);
transition: 0.4s;
opacity: 0;
padding: 5px 0;
}


.team_info h3 {
font-size: 0.8rem;
text-align: center;
color: #be1622;
font-weight: 800;
padding: 0 10px;
}


.team_info h4 {
font-size: .6rem;
text-align: center;
color: #be1622;
font-weight: 600;
padding: 0 10px;
}


.team_info h5 {
font-size: .4rem;
text-align: center;
color: #000;
font-weight: 400;
padding: 0 10px;
}


.animiert {
transition: 0.4s;
z-index: 9999;
position: relative;
}


.wrapper_team:hover, .animiert:hover {
transform: scale(2);
transition: 0.4s;
z-index: 9999;
}


.teamfotos div:last-child img {
margin: 0;

Zitat von gindi35510

Wenn man die Bilder von Andrea, Nazia, Sulav und Dilan mit F12 untersucht, sieht man daß <div class="wrapper_team"> bei allen vier die gleiche Größe hat: 174,4x266,6

<img title="Andrea" src="images/Andreaklein.jpg" hat eine Größe von 164,4x247,583

<img title="Nazia" src="images/NaziaNEUklein.jpg" hat eine Größe von 164,4x246,6

<img title="Sulav" src="images/Sulav.jpg" hat eine Größe von 164,4x256,6

<img title="Dilan" src="images/Dilan_klein.jpg" hat eine Größe von 164,4x246,4

wobei Sulav die Einzige der drei ohne weißen Streifen unten ist

"images/Andreaklein.jpg" hat eine Größe von 2164x3259

"images/NaziaNEUklein.jpg" hat eine Größe von 800x1200

"images/Sulav.jpg" hat eine Größe von 2088x3259

"images/Dilan_klein.jpg" hat eine Größe von 800x1199

Sicher wissen die Spezialisten mehr dazu.

Gruß Gindi

Alles anzeigen

Danke für deine Nachricht. Die Fotos haben eine unterschiedliche Größe, das war meistens kein Problem, weil die Fotos automatisch an die Größe des Rahmens angepasst waren.

Zitat von Stef

cmpunk85 , füge diesen Code in deine user/custom css

Code

.teamfotos img {
  min-width: 100%;
  height: 100%;
}

Perfekt! Das war die Lösung, min-width war der Schlüssel zum Erfolg. Vielen Dank an euch für die tolle Hilfe!