Anpassung eines Blog Teaser Fotos

silberfuchs

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

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

Tom

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

Super, Danke Dir @Tom

bleibt das "#tpl_blog_entry" so davor stehen?

Tom

Ja.

Anpassung eines Blog Teaser Fotos

Benutzer online in diesem Thema

cls studio

Informationen

Demoinstallationen

Hilfe