Größe eines je nach Versuchsbedingung angezeigtes Bildes verändern

Question

Hallo!

Meine Versuchspersonen werden durch einen Zufallsgenerator in eine von 4 Versuchsgruppen eingeteilt, von der abhängig ist, welche Art von Stimulus (= Video) sie sehen. Anschließend beantworten sie verschiedene Skalen. Ich möchte gerne auf die Seiten der Skalen jewils Screenshots aus dem jewiligen Video einfügen.
Das heißt, das angezeigte Bild muss abhängig von der Versuchsbedingung der Person sein. Dies habe ich jetzt durch den folgenden PHP Code gelöst:

if (value('CO01') == 1) {
html('<img src="bild1.jpg");
}
if (value('CO01') == 2) {
html('<img src="bild2.jpg");
}
if (value('CO01') == 3) {
html('<img src="bild3.jpg");
}
if (value('CO01') == 4) {
html('<img src="bild4.jpg");
}

So wird der Screenshot allerdings übermäßig groß angezeigt. Ich weiß jedoch nur, wie man Größenanpassungen im html Code eingibt und dieser bezieht sich dann nicht auf den php Code von zuvor.

Wie kann ich also schön kompakt, 2 kleine Screenshot Bilder nebeneinander (es soll dann noch eins dazukommen) auf der Seite anzeigen lassen?

Danke und viele Grüße!

Answer 1

Ich weiß jedoch nur, wie man Größenanpassungen im html Code eingibt

Genau dort können Sie eine Größenänderung vornehmen - also hier (ich habe den Code noch ein wenig korrigiert, weil die Anführungszeichen und die spitze Klammer noch nicht stimmten.

html('<img src="bild1.jpg">');

Mit Anpassung der Größe dann z.B.

html('<img src="bild1.jpg" style="width: 240px; max-width: 100%">');

Oder wenn es mehr Bilder sein sollen

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%">
');