• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Panorama Bild verbraucht nach drehung viel Platz

KiliHD

Neues Mitglied
Hallo,
ich habe ein Panorama Bild von mir um 90 Grad gedreht und es sieht an sich alles gut aus, dass Problem: Jetzt hat es nach oben und unten eine große weiche Fläche die mich stört.
SEITE: https://kilihd.de/artikel/fußballgolf.html

Mein Code:
Code:
<div><span style="text-align: right; color:white; position: absolute;">(c)KiliHD</span><img src="/bilder/fußballgolf1.jpg" style="width:25%; height: auto; transform: rotate(-90deg);"></div>

Hat jemand eine Ahnung wie ich den Abstand wegbekomme? (Die Seite / Text ist sowieso noch in Arbeit)
Vielen Dank schonmal, Kilian.
 
Werbung:
Rotierte (bzw. transform) Elemente beeinflussen die Proportionen ihres Elternelements nicht.
Tauschst du transform: rotate(-90deg); einfach mal durch transform: scale(2) aus, siehst du den Effekt.
Man kann den Effekt ein bisschen mit position: relative vergleichen:
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird.
Source.

Es lässt sich auch an den folgenden Bildern erkennen:
51345135
Wie du siehst verbraucht ein transform Element genauso viel Platz wie es selbst, wenn es nicht transformiert wäre.

Es gibt Wege, dass Elternelement entsprechend anzupassen, wie hier diskutiert wird. In deinem Fall würde es allerdings reichen einfach das Bild zu drehen und zu speichern und nicht mit CSS.
 
@Aaron3219 | Danke für deine Hilfe, das ist echt viel Text und Code dorto_O.
Das mit dem Bild drehen geht wohl leider nicht, mir wird es wenn ich mir vom Browser oder so auf meinem PC das Bild angucke es richtig rum angezeigt. :/
 
Werbung:
Du hast recht, das Bild ist in der richtigen Orientierung.
Was aber komisch ist, zeigt sich hier:

5137

Der Request kriegt das Bild falsch herum. Nachdem ich ein bisschen in den Requests rumgeschaut habe, hat sich Folgendes gezeigt:

5139

In den Respnse Headern steht eine wichtige Info: Status 206. Das kam mir nicht ganz richtig vor, da der normale Status eigentlich 200 sein sollte. Also einmal schnell nachgeschaut. Was dieser Status aussagt, lässt sich hier nachschauen.
The HTTP 206 Partial Content success status response code indicates that the request has succeeded and has the body contains the requested ranges of data, as described in the Range header of the request.

Long story short: Dein image ist über 8000x2000 Pixel groß. Irgendwo ist festgelegt, dass dieser Request wahrscheinlich zu groß ist und es wird eine range angegeben.

Um das zu fixen, solltest du deine Bilder kleiner machen. Ich sehe da auch andere Bilder in 4000x... Pixeln und so weiter. Allein das Laden dieser Bilder dauert mehrere Sekunden. Kleiner machen und komprimieren ist hier angesagt (und zwar von fast allen Bildern), dann wird dein Problem gelöst sein.
 
Zurück
Oben