提醒：本文最後更新於 1944 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

晚上 ao 大哥發過來一個連結，是關於 firefox 開始支援「image-orientation」這個 css 屬性的，我用最新的 Firefox Nightly 26.0a1 做了一些測試。

我在一年半前寫過一篇《圖片自動旋轉的前端實現方案》，原理是先用 JS 從圖片二進位制中解析出 Exif 資訊，再用 canvas、css3 等方案讓圖片旋轉到正確的位置。不知道「Exif 是什麼，以及如何從 Exif 解析出圖片正確方向」的同學可以先看我之前的那篇文章。

目前只有 Firefox26 支援這個讓圖片旋轉的 css 屬性，它的語法定義如下：

Formal syntax: from-image | <angle> | [<angle>? flip]

其中「from-image」表示使用從 Exif 中獲取到的方向；也可以使用 <angle> 指定要旋轉的角度；還可以用 flip 關鍵字對圖片水平翻轉，<angle> 和 flip 結合使用時表示先旋轉，再水平翻轉。

<angle> 預設值是「0deg」，大於 0 的值表示順時針旋轉，小於 0 的值表示逆時針旋轉（注：我測試的 Firefox 26.0a1，小於 0 的角度會被忽略，沒任何效果，computed 值是 0deg。應該是實現錯誤）。<angle> 只能是 90 的整數倍，否則按最接近的 90 的倍數處理。如 44deg 會當成 0deg，45deg 會當成 90deg：

需要注意的是，image-orientation 只能用於 <img> 標籤，不能用於背景圖等其它場景。另外它可以被繼承，也就是說在容器上定義的 image-orientation，對容器內所有的 <img> 圖片都有效。

如果給圖片指定了寬度或高度中的一個，旋轉後由於寬高交換，會導致另一個值發生變化，就像上面那張圖那樣。而很多實際應用中，圖片寬高是事先獲取好的，但使用 image-orientation 可能會使圖片插入到文件後寬高發生交換，這一點尤其需要注意。

總的看來，這個屬性值離實際使用還有很長一段距離。現階段要旋轉或翻轉圖片，可以用支援度更高的 transform；要根據 Exif 自動旋轉圖片，還是在後端處理更靠譜。

參考：

--EOF--

發表於 2013-09-15 00:46:05 ，並被新增「 CSS 、 Exif 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 1944 天前，文中所描述的資訊可能已發生改變，請謹慎使用。