やりたいことはオリジナルサイズを200×200に内接リサイズしたい
はじめに
CSSのobject-fitってプロパティを適応しただけの話になるのですが、今まで画像のサイズを縦長なのか横長なのかによって縦に合わせて内接リサイズを行って来ました。具体的にやり方を上げると下記のようなことをしていました。
- JavaScriptで画像のサイズを適当に取得
- 縦から横の長さ引く
- 負のあたいかどうかで横長用のclass当てるか縦長用のclass当てるか決定
- JavaScriptでclass追加する
絶対無駄なことしてるCSS3ってすげーって聞いたし調べたらできるでしょ！
5分後
CSS の object-fit プロパティは、置換要素の内容物を、自身が使用する高さおよび幅によって形作られるボックスへどのようにはめ込むかを指定します。
これじゃん!
というわけでサンプルを作ってみる
サンプル用の画像はPlacehold.jpというサイトを使って生成しています。
めっちゃ便利なのでちょいちょい使わせてもらってます。ありがとうございます！
利用規約見たら神なのかしら？って思うほど優しさに溢れてます。(twitter見たら一日10万ぐらいは余裕で画像生成してるみたい)
サンプルコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample object fit</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div>
<h2>オリジナルサイズ</h2>
<p>320×240サイズ<p>
<img src="http://placehold.jp/320x240.png">
<p>240×320サイズ<p>
<img src="http://placehold.jp/240x320.png">
</div>
<div>
<h2>200×200に内接リサイズした場合</h2>
<p>320×240サイズ<p>
<img class="contain" src="http://placehold.jp/320x240.png">
<p>240×320サイズ<p>
<img class="contain" src="http://placehold.jp/240x320.png">
</div>
</body>
</html>
main.css
.contain {
object-fit: contain;
width: 200px;
height: 200px;
background-color: #aaa;
}
注意点
対応ブラウザを確認しておく必要ありますよね？
http://caniuse.com/#search=object-fit
IE?Edge?知らない子ですね。。。
まとめ
JavaScriptのコード捨てた。外接リサイズもcontainをcoverに変更するだけ。
主要なブラウザは対応しているみたいなので問題がない場合はCSSのみで内接リサイズしてしまいましょ！