中心小猫？在jsFiddle？

Question

http://jsfiddle.net/TurtleWolf/P7xKm/

无论显示器尺寸如何，我所要做的就是居中/拉伸图像，因此它总是用完整的图像填满背景。不超过或小于该图像的完整水平 ......有什么建议吗？

Answer 1

http://jsfiddle.net/P7xKm/2/

文本对齐：中心

Answer 2

如果你想让图像拉伸以完全填满背景，那么：

img {
    width:100%;
    height:100%;
}

应该这样做。

Answer 3

这将填补横向：

<div id=container>
    <img src="http://placekitten.com/g/200/300" style="width: 100%;"/>
</div>

小提琴链接：http://jsfiddle.net/YSnDa/

如果你还想让它拉伸垂直（如果那也是你想要的也不清楚，你也可以添加高度定义：

height: 100%;

理想情况下，您应该将其解压缩到一个类来分隔您的HTML / CSS：

<style>
    .bg_image {
      width: 100%;
    }
</style>

然后将该课程应用于您的图片：

<img src="http://placekitten.com/g/200/300" class="bg_image" />    

Answer 4

img {
    width:cover;
}

我最近开始使用