Unterschiedliche Bildergrössen bei Desktop und Mobileversion

Question

Hi! Ich möchte in der Mobilversion und Desktopversion bei dieselber Frage meiner Befragung unterschiedliche Bildergrössen verwenden. Wenn ich aber die Größen in einer Version anpasse, werden diese automatisch auch in der anderen Version geändert. Wie kann ich das verhindern? Ich möchte, dass die Bilder, die als Antwortoptionen angezeigt werden, in Desktopversion größer sind als in Mobilversion (bei horizontaler Auswahl). Danke im Voraus

Answer 1

Es gibt drei Möglichkeiten:

1) Sie können mit ein wenig CSS im <img>-Tag die Größe automatisch über die verfügbare Bildschirmbreite (oder auch anhand der Breite des Auswahlelements) steuern.

2) Sie können zwei Bilder hochladen und per Filter, abhängig davon in welchem Fragebogen Sie sind oder auch direkt abhängig von der BIldschirmbreite, das jeweilige Bild verwenden.

3) Sie können dasselbe Bild verwenden aber abhängig von Fragebogen/Bildschirmbreite selbiges mit unterschiedlichem HTML-Code einbinden und dabei eine unterschiedliche Größe mittels CSS festlegen.

Wenn Sie Genaueres zu einer der Optionen wissen möchten, kommentieren Sie gerne unter diese Antwort.

Comments

Darf ich Sie bitte fragen, wo sich der Header der HTML-Seite befindet??

---

> Standartbowser Safari auf dem iPhone. Das sieht dann so aus

Hmm ... für mich sieht das genauso aus wie auf dem großen Bildschirm, nur alles kleiner. Bitte erklären sie mir nochmal genau, an welcher Stelle die Darstellung nicht passt?

> Darf ich Sie bitte fragen, wo sich der Header der HTML-Seite befindet??

Diesen sehen Sie nur, wenn Sie in der erzeugten HTML-Seite den Quellcode ansehen würden. Der Punkt ist: Wenn Sie dort Ihren CSS-Code unterbringen möchten, dann verwenden Sie dafür die Funktion pageCSS(), vgl. https://www.soscisurvey.de/help/doku.php/de:create:functions:pagecss

---

> Hmm ... für mich sieht das genauso aus wie auf dem großen Bildschirm, nur alles kleiner. Bitte erklären sie mir nochmal genau, an welcher Stelle die Darstellung nicht passt?
 
Das erste Bild in der ersten Reihe sieht kleiner aus als die andere, wenn man das ganz genau anguckt

---

Danke - jetzt sehe ich es :) Diese Abweichung tritt unter Android auch auf.

Nur um Artefakte aufgrund unterschiedlich breiter Ziffern auszuschließen: Könnten Sie die Zahl bitte testweise entfernen oder einheitlich über dem Bild platzieren, also z.B.

<div>1.</div><img src="Animals-2-low.jpg" class="choice-img">

---

Ich habe es gerade ausprobiert, die Abweichung besteht jedoch weiterhin. Ich habe nun versucht, den PHP-Code in beiden Versionen hinzuzufügen, also sowohl in „base“ als auch in „mobile“. Dadurch sind die Bilder zwar gleich groß, allerdings befindet sich die Nummerierung dann links neben dem Bild und nicht mehr oberhalb. Gibt es eine Möglichkeit, dies so einzustellen, dass die Nummerierung weiterhin oberhalb der Bilder angezeigt wird?

https://myshare.uni-osnabrueck.de/f/516ff24df80b4235ab06/