[css] object-fitの落とし穴、アスペクト比がキープされないケースに翻弄される

CSSをセットしても、思った通りの表示にならない場合、なんとなくやりがいを感じ始める、ユゲタです。 画像サムネイル表示をする時に、便利だと思って使っていた「object-fit」ですが、何故か、画像が伸びて表示されてしまう事象が発生したので、その原因と解決方法を記載します。

本日のIT謎掛け

「アスペクト比」と、かけまして・・・ 「中島みゆきの糸」と、ときます。 そのココロは・・・ タテとヨコでおりなされる世界です。

便利なobject-fitについて

今どきのWEBページでは、ブラウザの表示するサイズも違えば、縦長、横長という状況も違うので、モバイルファーストからのレスポンシブデザインが必須とされています。 こうしたフレームも慣れてしまえば、なんてことはないんですが、画像を表示するエリアも、細部がコロコロ変わることも頻繁に発生するため、画像の表示にobject-fitスタイルを摘要するのが、定石になりつつあります（僕の中でですが・・・） "object-fit:cover"をセットすると、枠内に余白を作らずアスペクト比をキープして表示してくれるので、自動でトリミングしてくれる効果があります。 また、"object-fit:contain"をセットすると、枠内で画像の全体を表示してくれて、アスペクト比もキープされるので、画像が変形せずに全体像を表示することができます。 この２つを使うメリットは「アスペクト比をキープしてくれる」という事で、スマートフォンで撮影した写真の表示などは、縦撮りと横撮りで、サイズも違えば、比率も違うので、決められた枠の中での表示には、こうした処理が必須です。

スマホ写真は曲者

スマートフォンで撮影した写真には、"object-fit"が最適と書いたのですが、実はスマホで撮影した写真でこの機能を使うと、アスペクトが維持されないという事象を発見しました。 スマートフォンで撮影したこの画像を、object-fitで表示してみると・・・ こんな風に表示されてしまいます・・・orz アスペクト比がキープされるはずなのに、写真が横に伸びてしまっています。 この現象の原因は、写真に含まれている「exif情報」による、orientation値に問題があることがわかりました。 orientation値とは、jpegに含まれる情報の事で、gpsの値や、スマホで撮影した写真が、どの向きに傾いているかを収めているexifデータのなかでの、傾き情報を保持してくれています。 ブラウザでは、写真を表示する際に、orientation値がある場合に強制的に写真を傾けて（元にもどして）正常に表示してくれようとする機能がありますが、 cssのobject-fitでは、orientation値を考慮せずに表示をしてしまうため、アスペクト比を求める計算値の縦サイズと横サイズが入れ替わってしまうために、この表示不具合が発生しているということが原因なんですね。

対策

まったく、cssのエンジンがちゃんと対応してくれれば何の問題もないのですが、実はexifのorientation問題は、ブラウザの表示だけにとどまらず、 パソコンの画像プレビューで見る時、ブログや写真SNSなどにアップロードするとき、いろいろなところで、写真が横に傾いてしまうという事象が発生してしまいます。 こうしたトラブルを無くす一番いい方法は、orientation情報をなくして、横に倒れている画像は画像自体をrotateさせることがいいようです。 もっと言ってしまえば、exif情報を破棄するのが一番はやいのかもしれませんね。 スマホの設定でやってもいいですし、jpegファイルのexif情報を破棄してくれるwebサービスなどもあるので、手数はかかりますが、確実性が必要な場合は、致し方ないでしょう。 また、webサービスなどで使う場合は、画像処理で、exifを削除、または、別テキストに書き出して管理するなどの方法でやるのがいいでしょう。 なにはともあれ、画像のgps情報は、結構便利につかえるけど、orientation値は、混乱を招くことの方が多いので、正直いらん情報としか思えない。