사이트에서 이미지를 회전시키는 iPad 및 iPhone 브라우저?


13

이미지가 예상대로 90도 표시되지만 내가 지정한 이미지의 정상적인 크기를 유지하면서 현재 구축중인 사이트에서 이상한 일이 발생합니다. 이것은 iPad 및 iPhone의 Safari에서만 발생합니다 ... 다른 모든 브라우저에는이 문제가 없습니다.

여기에 이미지 설명을 입력하십시오

어떤 아이디어?

해당 페이지는 여기에서 볼 수 있습니다 : http://www.andrewpeterson.com/i-had-to-be-a-perfect-gentleman-with-the-princesses/


4
Uuuh .. 확인할 Apple 기기 나 브라우저가 없지만 EXIF ​​정보 (특히 회전)를 읽을 수 있습니까? 이 이미지에서 추가 정보를 모두 제거하고 (적어도 하나는 다음과 같은 이미지 압축기 사용 : punypng.com ) 이미지를 "최적화 된"버전으로 교체 한 다음 도움이되는지 확인하십시오 (브라우저에 현재 이미지 버전이 있는지 확인하십시오. 캐시를 지우십시오).
LazyOne

2
내가 본 적이 없는 문제에 대해 +1 몇 가지 추가 데이터 포인트 : IrfanView와 Photoshop은 모두 Mobile WebKit / Safari에서와 같이 회전 된 최상위 이미지를로드합니다. 데스크탑 사파리는 그렇지 않습니다. 이것은 이미지 메타 데이터에 있다는 아이디어를 지원하지만 거기에는 많은 것이 있지만 Photoshop 브라우저를 사용하여 어떤 특정 속성이 여기에서 수행되고 있는지 찾지 못했습니다 (EXIF는 많이 다루지 않습니다). 그래도 시작 장소를 제공해야합니다. @LazyOne, 당신이 실제 답변으로 다시 게시하려면 투표하겠습니다. 방금 PunyPNG를 통해 첫 번째 이미지를 실행했는데 저에게 효과적이었습니다.
Su '

나는 그것을했다 :) Thnx Su '
LazyOne

메타 데이터를 제거해도 같은 문제가 발생했습니다!

문제 해결 :) 메타 데이터를 삭제하는 프로그램을 얻는 데 번거 롭다고 생각되면 페인트로 이미지를 열고 (창에 포함) 이미지를 표시하고 복사하고 새 이미지를 선택하고 복사하여 붙여 넣습니다.

답변:


11

Uuuh .. 확인할 Apple 장치 나 브라우저가 없지만 EXIF 메타 데이터 (특히 회전) 를 읽는 것처럼 보입니다 .

XnView에서이 이미지 중 하나를 열었습니다. 이미지가 90도 회전되어 표시됩니다.

이 이미지에서 추가 정보를 모두 제거하십시오 (적어도 하나의 이미지에 대해 수행). 다음과 같은 이미지 압축기를 사용하십시오 : punypng.com (또는 메타 데이터 세부 정보를 제거하거나 회전하고 다시 저장하는 다른 도구)을 사용하여 이미지를 "최적화 된"버전으로 바꾸십시오.

iPad에서 다시 확인할 때는 브라우저에 현재 이미지 버전이 있는지 확인하십시오. 캐시를 지우십시오.

PS Thnx Su '


그거였다! 웹 브라우저에 영향을 미치는 것은 이상한 일입니다. IrfanView를 사용하여 파일을 수정하고 (파일을 열고 메타 데이터없이 다시 저장) 결국 모든 것이 잘 표시됩니다. 감사!
개럿


1

이미지가 MS Windows에서 올바른 방향으로 저장된 경우 EXIF ​​회전 메타 데이터를 수동으로 무시하는 쉬운 방법이 있습니다. Windows 탐색기에서 이미지 파일을 마우스 오른쪽 버튼으로 클릭하고 "시계 방향으로 회전"을 선택하십시오. 이미지를 완전히 회전 시키려면이 작업을 4 회 수행하면 이미지가 모든 시스템에 대해 올바른 방향을 갖게됩니다. 그런 다음 이미지를 웹 서버에 업로드 할 수 있습니다.


이것은 나를 위해 작동하지 않았습니다. 아마도 Windows 탐색기는 메타 데이터를 WIndows 10에 유지하지만 이전 버전에서는 유지하지 않았습니까?
M Katz

0

Apple의 Bug Reporter 를 통해 Apple에 버그로 신고했습니다 . 이것이 중요하고 샘플 데이터가있는 경우 문제에 대한 보고서를 두 개 이상 갖는 것이 문제가되지 않습니다. 아래 스크린 샷은 문제를 강조 표시해야하며 Apple 직원 이이 게시물을 볼 수있는 경우 문제 ID는 11299426입니다.

일관되지 않은 회전 동작

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.