TYPO3 bringt seit Version 6.2 verschiedene Lösungen für die Behandlung von Bildern im Zusammenhang mit responsive Design mit. Eine weitere Möglichkeit findet man in der Bootstrap Distribution. Für einfache Anwendungsfälle stelle ich hier eine eigene Option vor.

Ich möchte folgendes erreichen: verkleinert sich das Browserfenster, soll sich zunächst ab einer bestimmten Auflösung das Bild, das in der Regel neben dem Text platziert ist, ebenfalls verkleinern und ab einem festzulegenden Breakpoint (hier: 450px) soll das Bild oberhalb des Textes stehen und in der angegebenen Breite angezeigt werden. Ich möchte vermeiden, dass bei bestimmten Fenstergrößen „Textreste“ neben dem Bild stehen bleiben wie das standardmäßig der Fall ist. Außerdem will ich nicht, dass sehr kleine Bilder, z.B. schmaler als 200 Pixel, oberhalb des Textes angezeigt werden – für diese Größen soll die entsprechende Funktionalität außer Kraft gesetzt werden.

Man benötigt jQuery, um eine Variable mit den jeweiligen Bildbreiten zur Verfügung zu haben und eine Abfrage auf die Größe machen zu können.

$.each($('.csc-textpic-imagewrap'), function() { 
  var imagewidth = $(this).find('img').attr('width');
  if(imagewidth > 200) {
    $(this).addClass('responsive');
  }
});

Hiermit ist sichergestellt, dass nur Bilder berücksichtigt werden, die breiter als 200 Pixel sind.
Der Rest ist simples und kurzes CSS:

.csc-textpic-imagewrap img {
  width:100%;
  height:auto;
}
.csc-textpic-imagewrap.responsive {
  max-width:50%;
}
@media screen and (max-width: 450px) {
  .csc-textpic-imagewrap.responsive {
    max-width:100%;
    float:none !important;
  }
  .csc-textpic-imagewrap.responsive img {
    width:inherit;
  }
}

Um zu vermeiden, dass Bilder, die über die ganze Breite gehen ebenfalls erfasst werden, kann man das CSS so abwandeln:

.csc-textpic-intext-left .csc-textpic-imagewrap.responsive,
.csc-textpic-intext-right .csc-textpic-imagewrap.responsive {
  max-width:50%;
}

Wie gesagt, diese Lösung ist eher eine einfach und nicht für alle Fälle geeignet.