要件
- アスペクト比不明の画像がアップロードされる。
- アスペクト比を維持したまま、特定のサイズで表示させたい。
- アスペクト比を維持したまま、画像を回転させたい。
「最初から回転させた画像をアップロードさせろよ！」と思わないでもないですが、システム屋さんはユーザがろくでもない操作を行う事にも対応していかなければなりません。
なお、本記事では画像の回転までは深く触れません。rotate使えばスグなので、以下のサイトを参考にしてみてください。
CSS で要素を回転させる方法を紹介します。例えば、文字や画像を傾けたり、回転アニメーションを実装したい時に便利な方法です。
しかし、今回の要件において一番の問題がこの回転であることは間違いないでしょう。
というのも、アスペクト比を維持して表示させただけでは、回転させたときに他の要素と被ってしまったりするからです。
もちろん、その領域も「ガリガリ書いてくぜ」スタイルでもいいかもしれませんが、便利なものがあるなら使わない手は無いでしょう。
対応
- CSSのみで対応可能。（ただし、CSS3のみ）
- 『object-fit』要素を使う。
対応内容としてはこれだけです。簡単ですよね。
以下、サンプルのCSSです。
img {
width: 300px;
height: 300px;
object-fit: content;
}
これでアスペクト比を維持したまま画像を表示しただけではなく、表示した画像を回転させても他の要素の邪魔をしない様になります。
以上です。
スポンサーリンク
