Bildgröße nach Randomisierung für das Smartphone optimieren

Question

Hallo,

ich habe eine Frage bezüglich der Optimierung der Bildgröße für Smartphones. Durch Randomisierung werden verschiedene Szenarien mit jeweils einem Bild pro Szenario erzeugt. Auf dem Laptop hat das Bild auch die richtige Größe. Teste ich allerdings den Fragebogen auf meinem Smartphone, so ist das Bild viel größer (breiter) als der eigentliche Fragebogen.

Ich habe schon mit diesem Code hier versucht, die Größe des Bildes optimal an das Smartphone anzupassen:

<style type="text/css">div.spacing img {max-width:100%;}</style>

Allerdings hat sich an der Darstellung auf dem Smartphone nichts geändert. Wo muss ich diesen Code genau einfügen? Direkt vor dem Bild?

So sieht mein aktueller Code aus:

<div style="text-align: center; margin: 20px 0">
<style type="text/css">div.spacing img {max-width:100%;}</style>
	<img src="Folie6.JPG" width=800 heigth=450>
</div>

Ich dachte erst, dass ich evtl. die Angabe "width=800 heigth=450" weglassen muss, aber die brauche ich, damit das Bild auf dem Laptop in der angemessenen Größe angezeigt wird.

Vielen Dank und liebe Grüße

Answer 1

Der genannte CSS-Code gehört in die HTML-Vorlage des Fragebogen-Layouts. Dort ist auch bereits ein -Block, den Sie dafür verwenden können.

Außerdem müssen Sie das width und height (das ohne Anführungszeichen um die Zahl ohnehin formal nicht korrekt ist) aus dem -Tag entfernen. Sonst überschreiben diese Angaben die CSS-Definition.