온라인에서 내 이미지의 방향이 올바른데도 HTML에서 이미지가 거꾸로 나타나는 이유는 무엇입니까?

HTML의 이미지 방향 불일치 문제 해결

문제:

지정된 링크에서 검색한 이미지가 표시될 때 거꾸로 나타납니다. tag.

분석:

이미지 링크를 조사한 결과 이미지의 방향이 정상적인 것으로 나타났습니다. 그러나 링크를 태그를 사용하면 제공된 JSFiddle 코드 조각에서 볼 수 있듯이 이미지가 거꾸로 렌더링됩니다. 이는 이러한 방향 불일치의 원인이 무엇인지에 대한 의문을 제기합니다.

해결책:

철저한 연구를 통해 부분적인 해결책을 찾았습니다. 현대 이미지에는 사진의 의도된 방향을 정의하는 메타데이터가 포함되는 경우가 많습니다. 이 문제를 해결하기 위해 이미지 방향을 위한 새로운 CSS 사양이 특별히 도입되었습니다. 다음 CSS 규칙을 스타일시트에 통합하면 이미지 방향 문제를 완화할 수 있습니다.

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

브라우저 지원:

2016년 1월 25일부터 지원 이 CSS 규칙은 Firefox 및 iOS Safari로 제한됩니다(접두사 뒤에 있지만). 그러나 일부 사용자는 Safari 및 Chrome에서 지속적인 문제를 보고했습니다. 모바일 Safari가 명시적인 CSS 태그를 요구하지 않고도 본질적으로 이미지 방향을 지원하는 것 같다는 점은 주목할 가치가 있습니다.

향후 전망:

지원을 구현하는 책임은 브라우저 개발자에게 있습니다. 다양한 브라우저에서 일관된 이미지 방향을 보장하려면 image-orientation 속성을 사용하세요. 그때까지 사용자는 특정 브라우저에서 이미지 방향의 차이를 경험할 수 있습니다.

위 내용은 온라인에서 내 이미지의 방향이 올바른데도 HTML에서 이미지가 거꾸로 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!