Bilder unterschiedlich darstellen (Smartphone vs. PC)

Question

Moin,
Ich habe im Fragebogen Bilder eingebaut (am PC sind sie viel zu groß, aufm Smartphone optimal).

Ich habe eine Rubrik zu "Gerät und übermittelte Variablen" erstellt und "Formal" ausgewählt. Diese habe ich dann auf die erste Seite getan. Jetzt brauche ich einen PHP-Code. Ich möchte, dass Smartphone-User die jetzige Version des Bildes sehen und PC-Nutzer minimiert auf 70%. Also habe ich bspw. auf Seite 5 das Bild in 100% und auf Seite 6 das Bild in 70%. Smartphone-User sollen nur Seite 5 sehen und PC-User nur Seite 6.

Das ist das Bsp. das ich gefunden habe (ich habe allerdings keine "question" und auch nicht wirklich eine Kennung, sondern eben nur die Bilder):

if (value('GG01_FmF') == 5) {
  question('FM01');
} else {
  question('FS01');
}

Kann mir jemand sagen, wie der PHP-Code lauten muss? Das wäre super!

Viele Grüße

Answer 1

Sie können statt dem question()-Befehl einfach einen html()-Befehl verwenden und den HTML-Code zur Anzeige der Bilder einbinden:

if (value('GG01_FmF') == 5) {
  html('<img src="bild1.jpg" style="width: 100%">');
} else {
  html('<img src="bild1.jpg" style="width: 70%">');
}

Allerdings geht es womöglich auch einfacher. Probieren Sie einmal folgenden CSS-Befehl im Bild:

<img src="bild1.jpg" style="max-width: 100%">

Damit skaliert der Browser (!) das Bild automatisch kleiner, wenn es über den Fragebogen hinaus ragt. Mit anderen Breitenangaben sind natürlich auch andere Größen möglich.