0

我有以下 HTML：

<section id="infopic" class="grid_5 prefix_1" style="height: 500px;">
   <div id="login-image"></div>
</section>

这个CSS：

#infopic {
   background-image: url("/Images/login.png");
}

我有几种不同的方法可以使我的图像拉伸以适应#infopic 的边界，但仍然无法使其正常工作。现在它在图像上方的代码中重复（小于 500px 正方形）只是重复。

4

4 回答 4

1

尝试添加background-size属性。

一些例子：http ://www.css3.info/preview/background-size/

于 2013-01-07T08:59:59.373 回答
0

你可以试试 background-size 声明：

background-size: 100% 100%;

这适用于 IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+。我认为它不能在旧浏览器中完成。也许：

#infopic {
    background-image: url("/Images/login.png") 50% 50% no-repeat;
    background-size: 100% 100%;
}

为了向后兼容？

于 2013-01-07T09:00:53.077 回答
0

您可以使用 CSS3 属性background-size: 100%;在整个元素上拉伸图像：

#infopic {
  height: 500px;
  width: 1000px;
  background-image: url("http://placehold.it/250x250");
  background-repeat: no-repeat;
  background-size: 100%;
}

这是一个 CSS3 属性，因此旧浏览器不支持它（我什至不确定 IE 是否支持），但它对现代浏览器很有用。

作为附加说明，混合外部和内联 CSS 是一个糟糕的想法，这就是我将高度声明移至外部 CSS 的原因。

:)

http://jsfiddle.net/x4w7V/

于 2013-01-07T09:02:04.627 回答
0

像这样使用：

img {
  background-size: 100%;
  max-width: 100%;
}

参考：

流体图像

于 2013-01-07T09:19:54.690 回答