Hallo,
habe in Typo3 4.7.4 ein Responsive Design mit 3 Spalte. Breite in % aufgeteilt.
Wenn ich nun ein Inhaltselemt "Bilder" mit 3 Bilder und Anzeige in 3 Spalten erstelle, ohne Größenangabe, nimmt er natürlich den Wert von styles.content.imgtext.maxW her und teilt die 3 Spalten auf diesen Wert auf.
Dann zeigt bei kleinerem Container zb nur 2 nebeneinander an.
Kann hier irgendwie 100% der Containergröße angegeben werden?
Vielen Dank,
Sandro
Hallo Sala,
indem Du das Layout Element wrappst kannst Du per CSS auch das Bild auslesen und so im CSS die Bildgröße bestimmen.
tt_content {
stdWrap.innerWrap.cObject.default {
20 {
15 = TEXT
15.dataWrap = layout-{field:layout}
15.noTrimWrap = || |
}
}
}
Wenn Du im Inhaltselement nun Standard als Layout ausgewählt hast, wirst Du es im Quelltext mit dem Wrap "layout-0" wiederfinden.
Per CSS kannst Du nun mit .layout-0 und der entsprechenden Klasse das Bild direkt ansprechen.
Zum Beispiel
.layout-0 .csc-textpic-last img {
width: 100%;
max-width: 200px;
height: auto;
}
oder übergreifend für alle Bilder innerhalb des Inhaltselements:
.layout-0 img {
width: 100%;
max-width: 200px;
height: auto;
}
Viele Grüße
Dausi
Hallo
Ich habe es so gelöst, dass ich dem wrap um die Bilder die jeweilige Spaltenanzahl mitgebe:
tt_content.image.20 {
rendering.noCaption.allStdWrap.wrap = <div class="csc-textpic-imagewrap csc-textpic-{field:imagecols}-col"> | </div>
rendering.noCaption.allStdWrap.wrap.insertData = 1
}
In meinem CSS setze ich dann die Breite der Bildspalte, indem ich diese mittels des oben mitgegebenen Selectors anspreche:
.csc-textpic-2-col .csc-textpic-imagecolumn { width:48% }
.csc-textpic-3-col .csc-textpic-imagecolumn { width:31% }
Dabei gilt es sicher noch einiges zu beachten, wie z.B. der Abstand zwischen den Bildern, captions, usw.
Bei meinem (einfachen) Layout funktioniert dies aber einwandfrei.
Grüsse
Kuse
in CSS ein max-width:100% sollte doch komplett ausreichen oder nicht ?