Rigel-Computer


Responsive Images - auch im CMS

Und das mit genau nur zwei Zeilen Code...

Es ist ja häufig so, dass allgemein bekannte Sachen - Codes / Code-Snippets in unserem Falle - gerne vorausgesetzt werden. 

Grade, wenn man über Jahre in immer komplexere Zusammenhänge einsteigt, tja, dann findet man auch nur noch komplexe Antworten... auf einfachste Fragen... und sich selbst plötzlich in der betriebsblinden Ecke wieder.

So z.B.: Wie zum Teufel bekomme ich mein CMS (hier natürlich Typo3) dazu, Bilder ganz einfach mit der Bildschirmbreite zu skalieren - und das in Breite... UND HÖHE.

TYPO3 gibt Bilder ja grundsätzlich mit fest verdrahteter Höhe und Breite aus, den gerenderten Images entsprechend. Um diese festen Größen für eine komplette Site zu übrschreiben, OHNE die Proportionen zu verlieren, hilft folgender Code

Zwei Zeilen - und das CMS wird responsive: 

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

/* Gilt natürlich auch für */
.picture {}

/* oder */
.image-embed-item {}