Grafische Positionierung - responsives Design

Question

Wie schaffe ich es, dass das Bild für eine Frage des Typs "Grafische Positionierung" auf mobilen Geräten die maximale Fensterbreite ausfüllt, anstatt über den Bildschirm hinauszugehen? Probiert habe ich es bisher mit HTML:

<style>
img {
    max-width: 100%;
}
</style>

Und per php/CSS:

pageCSS('
img {
    max-width: 100%;
    height: auto;
}');

was beides bei diesen Bildern leider nicht zu funktionieren scheint, im Gegensatz zu normalen Bildern im Fragebogen.

Oder ist das eventuell gar nicht machbar, weil das Setzen der Markierungen sonst nicht klappt?

Answer 1

Ich müsste den JavaScript-Code des Fragetyps nochmal genau einsehen, aber ich befürchte, der Fragetyp "grafische Positionierung" ist noch nicht für ein responsives Layout ausgelegt. Das sollten wir mal ändern...

Oder ist das eventuell gar nicht machbar

Zumindest mit einem Workaround ist es machbar. Bestimmen Sie mit einer Frage "Gerät und übermittelte Variablen" die Bildschirmbreite. Und wenn diese nicht ausreicht (also vermutlich ein Mobilgerät verwendet wird), dann zeigen Sie via PHP-Filter eine modifizierte Version der grafischen Positionierung mit einem kleineren Bild an.

Das ist nicht optimal, sollte das Problem aber zumindest lösen.