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;

<强>更新

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

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

有关详情，请参阅此link。

Answer 2

尝试设置背景大小。

/* Always cover the container (not a lot of support) */
background-size: cover;

或者

/* Fit width */
background-size: 100% auto;

或者，如果你想在div中完全没有裁剪，你可以将其设置为包含＆＃39;或者＆＃39;自动100％＆＃39;以适应高度。

希望有所帮助。：）

Answer 3

您是否需要像此链接一样显示图像？

http://codepen.io/anon/pen/grLED

 body{
color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
 background: url('http://i.imgur.com/BruV8Hk.jpg');
  background-repeat:no-repeat;
 }

Answer 4

我为你做了一个小例子，看看这个Link它可能会帮助你

有一个名为

的CSS3属性

background-size:cover;

将会发挥魔力：）

可在此处找到更多信息：http://www.w3schools.com/cssref/css3_pr_background-size.asp

显示图像全尺寸css

4 个答案: