Heim  >  Artikel  >  Web-Frontend  >  Warum stehen meine Bilder auf dem Kopf? Ein Blick auf die CSS-Eigenschaft „image-orientation“.

Warum stehen meine Bilder auf dem Kopf? Ein Blick auf die CSS-Eigenschaft „image-orientation“.

Patricia Arquette
Patricia ArquetteOriginal
2024-11-01 09:42:02382Durchsuche

Why are my images upside down?  A look at the `image-orientation` CSS property.

Probleme mit der Bildausrichtung mit dem img-Tag

Bei der Anzeige eines Bildes mit dem img-Tag kann es manchmal vorkommen, dass die Ausrichtung falsch ist, was zu einem Aufwärtstrend führt -Down-Bild. Dieses Problem ist auf Bildmetadaten zurückzuführen, die die beabsichtigte Ausrichtung des Fotos angeben.

Um dieses Problem zu beheben, hat CSS die Eigenschaft „image-orientation“ eingeführt. Durch Hinzufügen des folgenden CSS zu Ihrem Stylesheet können Sie die Bildausrichtung korrigieren:

<code class="css">img {
    image-orientation: from-image;
}</code>

Zum Zeitpunkt dieser Antwort (25. Januar 2016) werden Firefox und iOS Safari (mit einem Präfix) unterstützt die Bildausrichtungseigenschaft. Bei Safari und Chrome können jedoch weiterhin Probleme auftreten. Mobile Safari scheint die Ausrichtung nativ zu handhaben, ohne dass CSS erforderlich ist.

Bis eine umfassendere Browserunterstützung verfügbar ist, können wir damit rechnen, dass diese Ausrichtungsprobleme bestehen bleiben.

Das obige ist der detaillierte Inhalt vonWarum stehen meine Bilder auf dem Kopf? Ein Blick auf die CSS-Eigenschaft „image-orientation“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn