Image-Container proportional füllen

**mapfei** · 15.07.2016, 11:53

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?

**Spooky** · 15.07.2016, 11:56

Das Bild per Template Änderung als background-image einbinden und dann

Code:

background-size:100% auto; /* <= IE8 fallback */
background-size:cover;

Evt. verstehe ich auch dein vorhaben falsch - vielleicht brauchst du das ja auch gar nicht als Background image, sondenr einfach nur

Code:

figure img {
    display:block;
    max-width:100%;
    height:auto;
}

Dann wird das Bild halt proportional kleiner.

**mapfei** · 15.07.2016, 11:57

Zitat von Spooky

Das Bild per Template Änderung als background-image einbinden ...

Das wäre mir auch am liebsten. Aber dann wird ja immer das Original-Motiv verwendet...

**Spooky** · 15.07.2016, 11:58

Zitat von mapfei

Das wäre mir auch am liebsten. Aber dann wird ja immer das Original-Motiv verwendet...

Was genau meinst du damit?

**Spooky** · 15.07.2016, 11:59

Das Originalbild hast du, wenn du

PHP-Code:


$this->singleSRC

verwendest. Das von Contao erzeugte Bild hast du mit

PHP-Code:


$this->src

**mapfei** · 15.07.2016, 12:15

Zitat von Spooky

Das von Contao erzeugte Bild hast du mit

PHP-Code:


$this->src

Das war der gewünschte Denkanstoß!

Allerdings verwendet Contao mit

PHP-Code:


<div class="heroimg" style="background-image: url(<?= $this->src ?>);"></div>

jetzt immer das kleinste erzeugte Bild.

**Spooky** · 15.07.2016, 12:17

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.

**mapfei** · 15.07.2016, 12:29

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...

**Spooky** · 15.07.2016, 12:50

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.

**mapfei** · 15.07.2016, 12:54

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.

**Spooky** · 15.07.2016, 12:59

Zitat von mapfei

Die Größe der Bilder kenne ich ja nicht zwingend.

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).