【スマホ対応】画像を可変で上下左右中央配置＆領域いっぱい表示する

スマホにも対応してます。
CSSのプロパティ object-fit がAndroid4系の機種によっては挙動が怪しいので注意😓

DEMOはこちら - jsfiddle

HTML

<div class="image">
  <img src="http://placekitten.com/600/300" width="100%" height="auto" alt="">
</div>

SCSS

  .image {
    position: relative;
		overflow: hidden;
		box-sizing: border-box;
		height: 0;
        width: 50%;
		padding-bottom: 40%;

		&:before {
			content: "\0020";
			display: block;
			padding-top: 100%;
		}

		img {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

もっといい方法あったら教えて下さい😀
ありがとうございました🌟