html - 显示图像全尺寸 css

Question

我正尝试在我的博客中以全尺寸显示此图片:http://i.imgur.com/BruV8Hk.jpg

但是它被裁剪了……我不知道为什么。我试过重新检查 .header边界，我看不到我会在哪里限制图像的可用大小。

这是该站点的代码笔:http://codepen.io/anon/pen/grLED

请帮忙

编辑:

只是为了澄清..我想要我的.header容器要足够大以容纳完整的图像

编辑 2:

所以我只是这样做了:http://codepen.io/anon/pen/vJyFn得到想要的结果......没有所有这些可以完成吗<br> ？

Answer 1

将这些属性添加到您的 .header 类中。但我不确定这是否适用于旧浏览器。

background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

更新

如果您的高度小于图片高度，您将失去尺寸比例。在这种情况下，您的图像将被拉伸(stretch)。您可以像这样定义宽度和高度 background-size: 300px 150px; 如此处所述。

此外，您可以将 cover 和 contain 选项与 background-size 属性一起使用。由于您的容器高度小于图像，因此您必须依赖于此否则设置的宽度高度螺旋背景图像。

有关更多引用，请参阅此 link .