Bilder in Randomisierung

Question

Hallo SoSci-Survey Team,

ich habe folgendes Problem: wenn ich ein Bildelement (Foto mit grafisch eingebettetem Text) als normales Bildelement in den Fragebogen einbaue, dann skaliert sich dieses automatisch an die Größe des Browsers und bleibt scharf. Sobald ich meine funktionierende Randomisierung als php-code einbette, skalieren sich die Bilder nicht mehr automatisch. Wenn ich sie dann runterrechne, wird der Text darin sehr unscharf.

Was kann ich hier machen, dass die Skalierung wie bei einem normalen Bildelement auch bei meiner Randomisierung funktioniert?

Viele liebe Grüße
Mirjam

Answer 1

Sie können dem Bild mittels CSS-Anweisung sagen, dass es jeweils immer die maximal verfügbare Breite ausnutzen soll:

<img src="bildname.png" style="max-width: 100%;">

Allerdings ist es nur bedingt sinnvoll, Text als Bild zu speichern. Denn damit ist der Fragebogen nicht mehr barrierefrei. Und wie scharf der Text dargestellt wird, hängt dann auch vom Browser ab. Die technisch bessere Lösung wäre ein (runterskaliertes) Bild als Hintergrund zu verwenden und dann eine Textbox an passender Stelle darüberzulegen, z.B.

<div style="display: relative">
  <img src="bildname.png">
  <div style="position: absolute; left: 20px; top: 40px; width: 120px;">
  Hier ist der Text
  </div>
</div>

Comments

Es funktioniert, vielen Dank! Leider ist es notwendig, dass der Text im Bild ist, da ein Social Media Posting simuliert wird.

Danke für die schnelle Hilfe!

---

> Leider ist es notwendig, dass der Text im Bild ist, da ein Social Media Posting simuliert wird.

Das ist schon klar ;) Mit dem zweiten Beispiel kann man den Text in das Bild legen - also genauer: darüberlegen, sodass er genau an der Stelle erscheint wo er soll. Mit ein wenig CSS kann man auch Schriftgröße und Farbe entsprechend einpassen.