サイズの違う画像を指定したサイズ内で縦横比を一定にしつつ上手く表示する方法

ライターにとって、アップロードする画像のサイズってそんなに気にしないですよね
僕も記事書くときは、スマホで撮った写真を上げたり、写真サービスから引っ張ってきたりするわけです

今回はサイズの違う画像を指定したサイズ内で上手く表示する方法でobject-fitを使ったやり方を知ったので書いてみようと思います。

よくあるやり方

background-sizeを使った方法もありますが、imgタグを使った方法がSEO的に良いと思うので調べてみると色々な方法が出てくる出てくる。
中でもいい感じだなーと思ったのは以下のCSS

<span class="cover"><img src="http://jsfiddle.net/img/logo.png" /></span>
<span class="contain"><img src="http://jsfiddle.net/img/logo.png" /></span>

.cover,
.contain {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    width: 160px;
    height: 160px;
    overflow: hidden;
}

.cover img,
.contain img {
    position: absolute;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cover img {
    min-width: 100%;
    min-height: 100%;    
}
.contain img {
    max-width: 100%;
    max-height: 100%;    
}

ただちょっと複雑。。。
あと表示エリアより小さいサイズを表示しようとするとcontainが上手く表示できないなーと
(最後にJSFiddleのサンプルを載せています)

それobject-fitでできるよ

object-fitを使うとすっきり要件を満たせます。

<img class="obj-cover" src="http://jsfiddle.net/img/logo.png" />
<img class="obj-contain" src="http://jsfiddle.net/img/logo.png" />

.obj-cover {
  object-fit: cover;
  width: 160px;
  height: 160px;
}

.obj-contain {
  object-fit: contain;
  width: 160px;
  height: 160px;
}

シンプルですね
でも広まってないのは理由があります。

それがこちら

IE11が未対応なんです。。。
残念、、、でも世の中なんとかする方法はあります。

実はIEでも使えるようにできる!!

object-fit-images このjsを読み込んで属性の前でobjectFitImages()を読んでやれば、cssのfont-familyに'object-fit: contain;‘のように指定してやることで、IEでも動作するようになる。

<img class="obj-cover" src="http://jsfiddle.net/img/logo.png" />
<img class="obj-contain" src="http://jsfiddle.net/img/logo.png" />

<!-- いろいろなhtml -->
<script type="text/javascript">objectFitImages()</script>

.obj-cover {
  object-fit: cover;
  font-family: "object-fit: cover;"
  width: 160px;
  height: 160px;
}

.obj-contain {
  object-fit: contain;
  font-family: "object-fit: contain;"
  width: 160px;
  height: 160px;
}

少し行数は増えますが、スッキリしてると思います。
じゃんじゃか使っていきましょう!!
今回のサンプルコードはこちら

以上!
とんジニアメモでした!!