html - 保持图像居中

Question

我有这个简单的 html:

<img src="http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg" class="bg">

到目前为止，只要窗口不小于图像，我就可以将图像正确居中。现在，当窗口较小时，我无法将脸保持在中间!我怎样才能解决这个问题？对我来说，图像高度保持在窗口的 100% 很重要。

我的CSS:

img.bg {  
  width: auto;
  height: 100%;
  position: fixed;
  left:0;
  right:0;
  margin:0 auto;   

谢谢!

http://jsfiddle.net/67jDp/1/

Answer 1

尝试将其用作背景图像。CSS:

.bg {
    background-image:url('http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg');
    width: auto;
    height: 100%;
    position: fixed;
    left:0;
    right:0;
    margin:0 auto;   
    width:70%; //Custom dimension
    background-position:center;
    background-size:cover; 
}

演示:http://jsfiddle.net/lotusgodkk/67jDp/2/