Bilder je nach Größe des Screens nebeneinander bzw. hintereinander platzieren

Question

Hallo SosciSurvey-Team,

gibt es eine Möglichkeit, Bilder je nach Größe des Screens der Befragten im Fragebogen nebeneinander bzw. hintereinander zu platzieren? Ich möchte drei Bilder nebeneinander anzeigen. Trotzdem sind sie auf dem Smartphone ganz klein.

Vielen Dank für Ihre Hilfe!

Answer 1

Ja, und zwar mittels Flexbox.

Das könnte so aussehen:

<div style="display: flex; flex-wrap: wrap">
  <img src="bild1.jpg" style="flex: 1 1 auto; min-width: 160px; max-width: 300px;">
  <img src="bild2.jpg" style="flex: 1 1 auto; min-width: 160px; max-width: 300px;">
  <img src="bild3.jpg" style="flex: 1 1 auto; min-width: 160px; max-width: 300px;">
</div>

Hier zum ausprobieren (JSFiddle). Nachteil dabei: Die Bilder werden u.U. nicht gleich groß dargestellt, je nach Bildschirmbreite.

Wenn Sie das genauer steuern möchten, müssten Sie mittels pageCSS() ein wenig CSS-Code in Ihre Fragebogen-Seite einbinden, welche je nach verfügbarer Breite eine andere Darstellung verwendet. Wir machen das z.B. auf der Homepage von SoSci Survey.

Mehr dazu s. CSS Media Queries (SelfHTML). Dann können Sie je nach Breite unterschiedliche CSS-Formatierungen anwenden. Damit das funktioniert, müssen die Elemente (oben z.B. das <div>) aber erstmal mit einem CSS-Klassennamen ausgestattet werden. Wennn Sie sich das ein wenig angesehen haben, helfen wir hier gerne mit Details weiter.

Answer 2

Hallo,

vielen Dank für Ihre Rückmeldung. Ich habe mir nochmals überlegt und finde es in Ordnung, wenn die drei Bilder nebeneinander mit etwas Abstand zwischen ihnen angezeigt werden.

Könnten Sie mir bitte sagen, ob mit diesem Code die Seite auf allen Bildschirmen ordentlich dargestellt wird:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
    <col width="32%">
    <col width="2%">
    <col width="32%">
    <col width="2%">
    <col width="32%">
<tr>
<td style="text-align:center"><img src="bild1.jpg" style="max-width: 100%" ></td>
<td></td>
<td style="text-align:center"><img src="bild2.jpg" style="max-width: 100%" ></td>
<td></td>
<td style="text-align:center"><img src="bild3.jpg" style="max-width: 100%" ></td>
<td></td>
</tr>
</table>

Ich danke Ihnen im Voraus!

Mit freundlichen Grüßen

Comments

Nun, Sie können das Browserfenster einfach schmaler und breiter schieben, dann sehen Sie, wie es auf unterschiedlichen Bildschirmgrößen dargestellt wird. Auf einem Smartphone werden die Bilder halt ziemlich klein werden.