Anpassung eines Blog Teaser Fotos

Erster Teambeitrag

    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;
}
    • Teambeitrag

    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.