Anpassung eines Blog Teaser Fotos

silberfuchs · 24. Juli 2017

Hallo,

ich benötige mal Eure Hilfe zur Anpassung meines Blog Fotos.

Wenn ich mir im Firefox die Elementinformationen ansehe, steht dort für das Foto folgendes:

Code

#tpl_blog_entry .messageBody .entryImage img {
    max-width: 300px;
}

Wenn ich dort nun die Zeile 2 ändere in width: 100% ; dann wäre das mein gewünschtes Ergebnis. leider weiss ich nicht wie ich diese Änderung per CSS eintragen muss - dafür fehlen mir die Kenntnisse. kann mir dabei jemand helfen. Ich habe aktuell bereits folgendes versucht:

Code

.messageBody .entryImage img {
width: 100%;
}

...ist wohl doch nicht so einfach, wie ich dachte

Update: hab' es gerade mit folgendem Code hinbekommen - mit der Option width: 100% funktioniert es leider nicht. Hoffe der Code ist richtig und wirkt sich nicht noch woanders aus....

CSS

.messageBody .entryImage img {
max-width: 1200px !important;
}

silberfuchs · 24. Juli 2017

Musste leider feststellen, dass nun nicht nur das Foto des Artikels, als auch das Teaser-Foto des Blogs die Größe ändert.....

Tom · 24. Juli 2017

Du mußt das max-width mit:

max-witdh: none !important;

aufheben da:

width: 100%

breiter ist als:

max-witdh:100%;

CSS

#tpl_blog_entry .messageBody .entryImage img {
max-width: none !important;
width: 100%;
}

Damit skalieren die Bilder immer auf 100% Breite.

max-with: 100% gibt an daß das Bild maximal auf die Originalbreite und nicht größer skaliert wird. width: 100% skaliert immer auf den zu Verfügung stehenden Platz egal wie breit das Bild ist.

silberfuchs · 24. Juli 2017

Super, Danke Dir @Tom

bleibt das "#tpl_blog_entry" so davor stehen?

Tom · 24. Juli 2017

Ja.

Anpassung eines Blog Teaser Fotos

cls-design

Informationen

Demoinstallationen

Hilfe