Wie kann ich die Darstellung eines Bildes in der Smartphone-Version optimieren?

Question

Liebes SoSci Survey Team,

ich würde gerne links neben einer Auswahloption ein Bild im Fragebogen darstellen. Aus diesem Grund habe ich eine Tabelle erstellt, in der links das Bild ist und rechts die verschiedenen Items. Anschließend habe ich das Größenverhältnis von Bild zu Items festgelegt (siehe unten), wodurch auf dem Laptop nun in verschiedenen Browsern die Darstellung genau so ist, wie ich sie gerne hätte. Auf der Smartphoneversion ist das Bild jedoch wesentlich kleiner. Ich frage mich, was ich machen kann, damit das Bild zu Items Verhältnis auf dem Smartphone das gleiche ist wie auf dem Laptop.

Zum besseren Verständnis, sende ich einen Link zu meinen Pretest mit. Auf Seite 6 und 7 sieht man die Problematik: Auf dem Laptop sieht es gut aus, aber auf dem Smartphone leider nicht:

https://www.soscisurvey.de/ses2020/?act=IIhSYO6RxQGJlmN9Gym3XNF6

Ich würde mich sehr über eine Rückmeldung freuen.

Comments

bitte setze den Pretest Link direkt auf die betroffene Seite. Sonst müssen sich die Leute die dir helfen wollen erst durch 6 Seiten Pflichtfragen quälen ;)

---

Dieser Bitte schließe ich mich an :)

---

Vielen Dank für den Hinweis, das habe ich nicht beachtet! Ich habe oben nun den Link geändert, sodass er jetzt direkt auf die 6. Seite führt. :)

Answer 1

Auf der Smartphoneversion ist das Bild jedoch wesentlich kleiner.

Wenn ich den Link teste, schrumpft die Grafik auf dem Mobildisplay nur marginal - ich vermute, Sie haben die Abmessungen bereits ein wenig angepasst.

Die Ursache ist folgende Anweisung im <img>-Tag: max-width: 100%. Das sorgt dafür, dass das Bild schrumpfen darf, falls notwendig. Prinzipiell könnte man mit einigen Basteleien dafür sorgen, dass nur die Breite variiert, aber die Höhe bleibt. Das scheint mir aber keine besonders sinnvolle Lösung.

Vielleicht möchten Sie es stattdessen mal mit dem Fragetyp "Schieberegler" versuchen. Dieser kann auch vertikal doer schräg laufen - und man kann damit auch Eingabefelder auf oder neben einer Leiter platzieren. Eine entsprechende Vorlage finden Sie bei den Skalengrafiken des Schiebereglers.

Wenn Sie an Ihrer Tabelle hängen, dann würde ich zuerst in Betracht ziehen, die rechte Seite deutlich schmaler zu gestalten. Wenn Sie die linke Spalte breiter machen und das Bild rechtsbündig anzeigen, sollte das Ihr Problem bereits lösen.