Bildgröße an benutztes Gerät anpassen.

Question

Hallo,

ich möchte meine Studienteilnehmer zu unterschiedlichen Gruppen zuweisen, in denen ihnen dann jeweils ein anders Bild gezeigt wird. Hierzu verwende ich den Zufallsgenerator.

Nun habe ich jedoch das Problem, dass meine Bilder (1100 x 1550 Pixel) auf dem Handy viel zu groß angezeigt werden. Ich habe hier im Forum schon einige Fragen dazu gesehen, jedoch funktionieren die ganzen html Codes bei mir nicht. Ich muss gestehen, dass ich mich mit html auch leider gar nicht auskenne.

Kann mir bitte jemand erklären, was ich tun muss, damit meine Bilder auch auf dem Handy richtig angezeigt werden?

Liebe Grüße

Comments

>  jedoch funktionieren die ganzen html Codes bei mir nicht.

Was für HTML-Code haben Sie denn schon ausprobiert? Der Style-Parameter "max-width:100%" ist in aller Regel sehr hilfreich.

---

Ich habe folgende drei hier gefunden und ausprobiert:
1. html('<img src="bild1.jpg" style="width: 240px; max-width: 100%">');
2. <img src="bild1.jpg" alt="" style="max-width:100%">
3. html('
    <div style="display: flex; gap: 1em">
    <img src="bild1a.jpg" style="flex: 1 1 auto; min-width: 120px; max-width: 100%">
    <img src="bild1b.jpg" style="flex: 1 1 auto; min-width: 120px; max-width: 100%">
    <img src="bild1c.jpg" style="flex: 1 1 auto; min-width: 120px; max-width: 100%">
');

Ich habe mittlerweile herausgefunden, dass es an dem Zufallsgenerator liegt. Denn füge ich die Bilder normal auf eine Seite, passen Sie sich ans Handy an.

Heißt das, ich muss den HTML Code vom Zufallsgenerator erweitern?
Dieser sieht aktuell so aus:
<div>
  <img src="%random%" alt="">
</div>

Answer 1

ich muss den HTML Code vom Zufallsgenerator erweitern?

Wenn Sie das Bild direkt per Zufallsgenerator einbinden (und nicht mit weiterem PHP-Code), dann ja. Das könnte dann so aussehen:

<div>
  <img src="%random%" alt="" style="max-width: 100%;">
</div>