どうもつっつです。
今回はスマホで実用レベル(2016年現在)に達したかなと思う
CSS3プロパティobject-fitを紹介したいと思います。
目次
まずCanIuseで対応チェック
2015年頃はiOSで対応が遅れれて躊躇してたのですが
9.1で対応したみたいで9.0以上ユーザーも順調に
増えてるようので問題ないかなと思います
http://caniuse.com/#feat=object-fit
まずはobject-fitってどんなプロパティ？
object-fit
インライン置換要素に、親要素へのフィットの方法を指定します。
qiitaにあった参考ページ
background-size的(containもあります！)な画像リサイズ処理ができちゃうんです。
いまいちピンと来ないかもしれないので実例に行きたいと思います。
実際の例
コードも踏まえて実戦的な利用例を紹介したいと思います。
アップされた画像のサイズが違ってる場合に大活躍！
これが一番のメリットです（というかこれ以外シーンが思いつかないのですが）。。。
不揃いの画像が縦に並んでます、、、
ダメ例 widthだけを固定
サンプル<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>object-fit利用前1</h1>
<ul>
<li><img src="1.jpg" alt="" width="200"> 商品 100円</li>
<li><img src="2.jpg" alt="" width="200"> 商品 100円</li>
<li><img src="3.jpg" alt="" width="200"> 商品 100円</li>
<li><img src="4.jpg" alt="" width="200"> 商品 100円</li>
</ul>
</body>
</html>
ダメ例 widthとheightを固定
サンプルコード<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>object-fit利用前2</h1>
<ul>
<li><img src="1.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="2.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="3.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="4.jpg" alt="" width="100" height="200"> 商品 100円</li>
</ul>
</body>
</html>どちらも残念な感じになってしまいます、、、
前者は2列横並びレイアウトだと確実に崩れてしまい、
後者は画像がつぶれてしまいます。
上手い例 widthとheightを固定+object-fitを適用
サンプル<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img[src*=".jpg"]{
object-fit:cover;
}
</style>
</head>
<body>
<h1>object-fitの場合</h1>
<ul>
<li><img src="1.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="2.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="3.jpg" alt="" width="100" height="200"> 商品 100円</li>
<li><img src="4.jpg" alt="" width="100" height="200"> 商品 100円</li>
</ul>
</body>
</html>
これだと画像も潰れず、自動切抜きでいい感じになったと思いませんか。
backgroundでもできるんじゃない？
ちなみにこれ画像をbackgroundにして処理すれば
できるじゃんって思うかもですが欠点として、
画像が表示されなくなっちゃいます
ショッピングサイトとかだったら商品一覧を印刷して皆でわいわい選ぶとかってシチュエーションがありそうでないですか？？
backgroundで構築したサンプル
それに、CTRL+Pで印刷プレビューをするとデフォルトでは背景が印刷されないため
こんな感じになってしまいます。
画像であるべきものが画像でない不自然さ
SEO的観点からも画像であるべきものが画像でなく空タグだと不自然だとおもいませんか？グーグルボットは日々精度が上がってます
まとめ
どうですかobject-fit？
つっつはスマホでは積極的につかっています。
早くedgeでも対応してもらいたいのですが
そしたらPCでも積極的に使えるのですが、、、
もしかしたら対応する前にedgeが衰退してるかもしれませんが笑
では今日はこの辺で失礼させて頂きます。
