imgだけどサイズをbackground-size: cover;みたいにしたい

imgをcover化させる！

スライダーとかでバックグラウンドじゃなく、imgタグで入れたいけど、画面いっぱいにやりたい！
ってときに役に立つかと思います。

今回の例ではスライドを画面いっぱいにするので、クラス名はそんな感じで

index.html

<div class="slide">
  <img src="sample.png" alt="sample" width="150" height="100">
</div>

cover.css

.slide {
  position: relative;
  height: 100vh;
}
.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
}

imgタグの親にposition: relativeを入れて、imgタグにもろもろを入れていく感じになります。

これでimgタグがbackground-size: cover;と同じような感じになります。

object-fit

IEを対応にしない場合はobject-fitというのが使えます

cover2.css

.slide img {
  object-fit: cover;
  width: 100%;
  height: 100%
}

モバイル対応だけの場合はこちらでもいいかもしれませんね！