css - 比例してスケーリングされた画像を使用してコンテナを完全に覆う

Question

次のルールに従って、CSS を使用して画像をスケーリングします。

if (containerWidth/containerHeight >=imgWidth/imgHeight) --> img { width: 100% }
if (containerWidth/containerHeight < imgWidth/imgHeight) --> img { height: 100% }

アイデアは、CSS (javascript なし) を使用して、比例してスケーリングされた画像を使用してコンテナーを完全にカバーすることです。

望ましい結果: http://jsfiddle.net/pu76s/6/

Answer 1

CSS3 属性で背景画像を使用するbackground-size: cover

http://jsfiddle.net/UUhVf/

background-position属性で位置を調整できます