cssでimgを中央にマスクする

Question

例えば200300のdivがあったとして
そこに400300のimgが入っている場合、
隙間なく中央に配置したいのですが、

<div><img src="test.png" width="400" height="300"></div>

//css
<style>
div {
width:200px;
height:300px;
position:relative;
}
img {
position:abusolute;
height:100%;
width:auto;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>

横長画像の場合は上記で対応できますが、
ここに縦長が来た時は左右に余白が出来ます。。
現在はこれをjsで判別してcssを切り替えてるのですが、
これをcssだけで対応する方法ってあるんでしょうか？
対応ブラウザ：ieエッジ、ff、chrome、safari 最新

Answer 1

<div><img src="https://placehold.jp/24/cc9999/993333/350x150.png"></div>
<div><img src="https://placehold.jp/24/cc9999/993333/150x550.png"></div>

div {
  width:200px;
  height:300px;
  position:relative;
  overflow: hidden;
  margin: 1em;
}
img {
  /*position:abusolute; typo*/
  position: absolute;
  min-height:100%;
  min-width:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
```**動くサンプル：**[https://jsfiddle.net/jzk2tg5q/](https://jsfiddle.net/jzk2tg5q/)

Comments

[cheche0830]

ありがとうございました！すいません、一点条件がもれていまして、
画像が例えば1000*500のサイズのようにだいぶ大きなものが入った場合、
500pxの方を300pxまで縮小させたいのです。。
上記ですと大きい画像はそのまま大きく表示されてしまい・・・

[kei344]

すみません、仕様が後から出てくる質問には対応できません。経験上これで何かを回答しても、「これの時はこう」「じゃああれの時がこう」となるからです。JavaScriptでも使ってください。

[cheche0830]

すいません、漏れていた仕様は上記のみになります。できませんよねcssだけでは。。

[cheche0830]

あ、でも今までは縦横計算いちいちしてたのですが、画像をjsでかなり小さくしちゃったあとに
min-widht:100%,min-height:100%をimportantで無理やり拡大すれば実現可能ですね！
これならjsで一括処理ができそうですのでそちらで対応いたします！ありがとうございました！