Bild wird automatisch größer angezeigt trotz Pixelanzahl

Question

Hallo,

ich habe in meinem Fragebogen mehrere Bilder eingebaut. Die Bilder werden auf einer Seite präsentiert, auf der ansonsten keine anderen Elemente vorhanden sind. Es ist sehr wichtig, dass man das Bild im Vollbildmodus in seiner vollen Größe betrachten kann, sprich: nicht abgeschnitten, ohne scrollen zu müssen.
Ich habe die Pixelanzahl über ein Bildbearbeitungsprogramm so eingestellt, dass ich glaube, dass es korrekt angezeigt werden müsste (800 x 802 Pixel). Trotzdem wird es im Fragebogen immer noch zu groß angezeigt, so dass man scrollen muss, um das komplette Bild zu betrachten. Was auch merkwürdig ist, ist dass ein anderes Bild eine größere Pixelanzahl hat (1150*981) und trotzdem in der Vorschau kleiner angezeigt wird, als das Bild mit der kleineren Pixelanzahl.
Ich habe auch schon F5 gedrückt, daran kann es also nicht liegen.

Viele Grüße

Answer 1

nicht abgeschnitten, ohne scrollen zu müssen.

Nachdem Bildschirme unterschiedlich groß sind, ist es normalerweise sinnvoll, das Bild automatisch an die verfügbare Breite anzupassen:

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

Was die Höhe angeht, haben Sie da natürlich viele Faktoren. Da muss man u.U. ein wenig tiefer in die Trickkiste greifen, um die tatsächlich unter dem Header u.s.w. verfügbare Bildschirmhöhe zu ermitteln.

Wenn man z.B. 75% der verfügbaren Höher im Browser ausnutzen wollte, könnte das so aussehen:

<img src="..." style="max-width: 100%; max-height: 75vh">

Trotzdem wird es im Fragebogen immer noch zu groß angezeigt

Nehmen Sie Ihren Bildschirm bitte nicht als Maß aller Dinge. Es wird Teilnehmer:innen geben, die einen größeren/kleinen Bildschirm oder ein Smartphone verwenden.

Was auch merkwürdig ist, ist dass ein anderes Bild eine größere Pixelanzahl hat (1150*981) und trotzdem in der Vorschau kleiner angezeigt wird

Leeren Sie doch bitte mal Ihren Browser-Cache. Das ist die häufigste Ursache, warum Sie ein anderes Bild sehen als jenes, das Sie zuletzt hochgeladen haben.

Comments

Hallo, vielen Dank für die schnelle Antwort!
Leider haben die beiden Lösungsansätze mit "max-width: 100%; mac-height: 75vh" nicht funktioniert...

Bezogen auf das andere Bild mit der größeren Pixelanzahl handelt es sich nicht um ein Bild, das ich vorher eingebaut und wieder gelöscht habe, sondern um ein Bild auf einer anderen Seite des Fragebogens. Daher wundert es mich, dass  das besagte Bild im Fragebogen kleiner angezeigt wird, obwohl es eine größere Pixelanzahl hat, als das Bild mit der kleineren Pixelanzahl.
Viele Grüße

---

Sie können gerne Pretest-Links direkt (!) zu den beiden Fragebogenseiten posten, dann sehe ich mir das einmal an. Aus der Beschreibung heraus kann ich nur wild spekulieren...

"mac-height" müsste natürlich "max-height" heißen, ich korrigiere das oben gleich noch.

---

An dem "mac-height" hat es gelegen, da hab ich selber nicht nachgedacht, dass das keinen Sinn ergibt. Jetzt funktioniert es, vielen Dank für die Hilfe!