• WEB

スマホサイトで画像リサイズCSSはobject-fitが便利

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加

どうもつっつです。
今回はスマホで実用レベル(2016年現在)に達したかなと思う
CSS3プロパティobject-fitを紹介したいと思います。

まずCanIuseで対応チェック

2015年頃はiOSで対応が遅れれて躊躇してたのですが
9.1で対応したみたいで9.0以上ユーザーも順調に
増えてるようので問題ないかなと思います
cani-use
http://caniuse.com/#feat=object-fit

まずはobject-fitってどんなプロパティ?

object-fit
インライン置換要素に、親要素へのフィットの方法を指定します。

qiitaにあった参考ページ
background-size的(containもあります!)な画像リサイズ処理ができちゃうんです。
いまいちピンと来ないかもしれないので実例に行きたいと思います。

実際の例

コードも踏まえて実戦的な利用例を紹介したいと思います。

アップされた画像のサイズが違ってる場合に大活躍!

これが一番のメリットです(というかこれ以外シーンが思いつかないのですが)。。。

不揃いの画像が縦に並んでます、、、

ダメ例 widthだけを固定

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3サンプル

<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を固定

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a32サンプルコード

<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を適用

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a33サンプル

<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で印刷プレビューをするとデフォルトでは背景が印刷されないため
こんな感じになってしまいます。
%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a34

画像であるべきものが画像でない不自然さ

SEO的観点からも画像であるべきものが画像でなく空タグだと不自然だとおもいませんか?グーグルボットは日々精度が上がってます

まとめ

どうですかobject-fit?
つっつはスマホでは積極的につかっています。
早くedgeでも対応してもらいたいのですが
そしたらPCでも積極的に使えるのですが、、、
もしかしたら対応する前にedgeが衰退してるかもしれませんが笑

では今日はこの辺で失礼させて頂きます。

このエントリーをはてなブックマークに追加

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ