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

尝试将其用作background-image。 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/

Answer 2

尝试将图片设置为div的背景，而不是img标记

http://jsfiddle.net/CeVwN/1/

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

Answer 3

设置width to 100%以始终获得容器的宽度。然后，设置height to auto以允许比率：

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

请务必将max-width设置为在必要时停止展开。

Answer 4

你可以用这个小javascript

css：

img.bg {
    height: 100%;
    position: fixed;
    left:50%;
}

JS：

var i = $('img');
var w = i.width();

i.css({marginLeft: -w/2});

$( window ).resize(function() {
    i.css({marginLeft: -w/2});
});

DEMO：http://jsfiddle.net/67jDp/4/

保持图像居中

4 个答案: