Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

object-fitをCSSのみでIEにも対応してみる

More than 1 year has passed since last update.

便利過ぎてobject-fitナシではもう組めなくなってきた今日このごろ。
modernizrなどを使わなくてもCSSだけでIE10(IE9もいけるかも?)に対応する方法を知ったので書いておきます。
absoluteにしてtansformを使って画像の真ん中を合わせています。
(transformが使えないブラウザなんてもう知らない。)
あくまでレガシー対応で、完全対応ではないですが、デザインによってはこれで十分なケースがあると思うので。

html

<span class="media">
    <img src="image01.jpg" alt="" />
</span>
<span class="media">
    <img src="image02.jpg" alt="" />
</span>

CSS

.media {
    position: relative;
    width: 500px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
}
.media img {
    position: absolute;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
@supports ( object-fit: cover ) {
    .media img {
        position: static;
        height: 100%;
        width: 100%;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        top: 0;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}

デモ

っていうことで、じゃあobject-fit使わなくても良いんじゃん?てなりそうだけれど、position弄っちゃってたりするので、あくまでも後方互換として使うのが吉かと。

※ 追記:横長のものに入れたり画像が固定サイズなら特に問題ないと思いますが、デモみてもらうと分かるように、縦横自在に操るにはmax-widthなどで都度調整しなくてはならないのでメンドイです。(横長の画像の縦をちょっと削りたい、ぐらいだったら大丈夫。)

・・・早くobject-fitのみで済ませられる日が来ないかなあ。

モダンブラウザとIE10では動作確認済みですが、何か間違えてたら教えてください。

参照

手前味噌のページで恐縮ですが、Wordpressのテーマで使われてて気がついたのが最初でした。
Wordpressのは画面全体を覆う場合なので、max-width: 1000%だったり、min-width:100vwとかが入っているのがミソ。

【Twenty Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】 – Photosynthesic blog
http://blog.photosynthesic.jp/2017/01/【twenty-seventeenのちょこっと解説】ヘッダーイメージのcssが/

@supportについてはこちらとかを。

@supports - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@supports

miminari
Webデザイナーて名乗ってたのに二人産んでる間にフロントエンドエンジニアに変わっていてアタフタしています。
http://blog.photosynthesic.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away