2015-03-04 14 views
5

Khi tôi xem các thuộc tính hình ảnh (xem bên dưới) trên máy tính của tôi, rõ ràng là hãy nói width:144height:256. Nhưng khi xem nó trong trình duyệt, kích thước được lật.Hình ảnh bị lật - chỉ trong trình duyệt

Ví dụ về nó lộn trong trình duyệt: http://jsfiddle.net/pLyg7ug9/2/

Direct link (chú ý rằng nó tải một cách chính xác trong chrome): http://pro-cuts.herokuapp.com/images/slideshow/thumb/8_flipped.jpg

Điều gì sẽ làm cho trình duyệt để lật chiều rộng và chiều cao?

Trả lời

3

Điều này là do định hướng JPEG và Định hướng EXIF. Về cơ bản, máy ảnh của bạn có cảm biến xoay hình ảnh tùy thuộc vào cách bạn chụp. Điện thoại bị khóa định hướng sẽ có những sự cố này.

JPEG Exif Data

+1

Cảm ơn thông tin, tôi không biết rằng đã tồn tại. Bạn có biết bất kỳ cách nào điều này có thể được giải quyết bằng css, để buộc trình duyệt phải tôn trọng chiều cao/chiều rộng không? –

+1

Tôi thấy rằng điều này tồn tại, nhưng tiếc là chỉ trong firefox http://caniuse.com/#feat=css-image-orientation –

+1

@JustinBicknell Bạn có thể có một loạt các kiểm tra để thay đổi luân phiên tùy thuộc vào trình duyệt. Nhưng đặt cược tốt nhất của bạn sẽ là chỉ sửa chữa nơi mà vấn đề bắt đầu, chính hình ảnh đó. Bạn chỉ có thể mở nó trong một chương trình chỉnh sửa hình ảnh, xoay nó nếu cần, và lưu lại nó. Hoặc chụp ảnh với vòng xoay chính xác (bật xoay khi chụp ảnh). –

Các vấn đề liên quan