Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-01 09:42:02
Original
392 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!