Druckbare Version
Hallo zusammen,
ich habe folgendes, vermeintlich "einfaches" Problem:
Auf einer Startseite werden (hervorgehobene) News-Elemente mit Bild ausgegeben. Die Breite dieser Elemente beträge 100%, die Höhe ist fest - in diesem Fall 260px. Das Bild soll nun proportional den kompletten Image-Container ausfüllen und dabei ggf. zentriert (mitte|mitte) werden. Dabei soll dann auch noch eine zuvor im Theme definierte Bildgröße(nberechnung) verwendet werden.
Wie gehe ich da am besten ran?
Das Bild per Template Änderung als background-image einbinden und dannEvt. verstehe ich auch dein vorhaben falsch - vielleicht brauchst du das ja auch gar nicht als Background image, sondenr einfach nurCode:background-size:100% auto; /* <= IE8 fallback */
background-size:cover;
Dann wird das Bild halt proportional kleiner.Code:figure img {
display:block;
max-width:100%;
height:auto;
}
Das wäre mir auch am liebsten. Aber dann wird ja immer das Original-Motiv verwendet...Zitat:
Zitat von Spooky
Was genau meinst du damit?Zitat:
Zitat von mapfei
Das Originalbild hast du, wenn duverwendest. Das von Contao erzeugte Bild hast du mitPHP-Code:$this->singleSRC
PHP-Code:$this->src
Das war der gewünschte Denkanstoß! :cool:Zitat:
Zitat von Spooky
Allerdings verwendet Contao mit
jetzt immer das kleinste erzeugte Bild.PHP-Code:<div class="heroimg" style="background-image: url(<?= $this->src ?>);"></div>
Achso, du willst das auch noch mit responsive images haben ;). Das geht als background image natürlich nicht.
Erkläre nochmal genau die Anforderung bzw. zeige ein HTML Beispiel wo du den Container so gestyled hast wie er sein soll und wo auch schon das Bild inkl. responsive images drin ist.
Die Anforderungen sind im Prinzip genau die, welche ich mit background-size:cover erzielen könnte - also ein immer proportional komplett ausgefülltes <div>. Allerdings eben mit responsive Images...
Ja, aber ich verstehe dein HTML und CSS Setup noch nicht ganz. So wie ich dich jetzt verstehe hast du einfach einen Container mit fixer Höhe, die Bilder sind ebenfalls schon fix auf diese Höhe zugeschnitten und jetzt musst du sie nur mehr per JavaScript nach links verschieben lassen, damit sie immer mittig sind.
Die Größe der Bilder kenne ich ja nicht zwingend. Ich muss davon ausgehen, dass der Redakteur später "alles mögliche" hochlädt und das Bild soll dann "bestmöglich" dem Rahmen angepasst werden, so dass der Rahmen eben vollständig gefüllt ist.
Die Größe der Originalbilder nicht, aber du kannst die Ausgabegröße ja auf, Hausnummer, 1280x260px mit dem Modus "Wichtiger Teil" stellen (in diesem Fall wäre 1280px deine maximale Frontend Breite in deinem Layout).Zitat:
Zitat von mapfei
Ich glaube ich stehe gerade voll aufm Schlauch... :(
Bedeutet aber dann ja, dass der Redakteur für jedes Bild diese Einstellung/Größe hinterlegen muss oder?
Nein, die legst du ja im Modul fest.Zitat:
Zitat von mapfei
Ok, ich glaub ich hab's jetzt. Mein Gedankengang war einfach falsch. :cool: Danke dir auf jeden Fall!