相关疑难解决方法(0)

我希望我的背景图像拉伸和缩放取决于浏览器视口大小.

我已经在Stack Overflow上看到了一些关于完成这项工作的问题,例如Stretch和缩放CSS背景.它工作得很好,但我想使用background而不是使用img标签来放置图像.

在那个img标签中放置一个标签,然后用CSS我们向img标签致敬.

width:100%; height:100%;

它有效,但这个问题有点陈旧,并指出在CSS 3中调整背景图像的大小将会很好.我试过第一个这个例子,但它对我来说没有用.

是否有一个很好的方法来做background-image声明？

我使用svg图像作为背景,我通过背景大小拉伸SVG图像.我希望它只是宽度明智的拉伸.它在firefox,IE9 +但Chrome中工作得非常好.请建议我如何实现它.

.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;

请参阅jsbin代码 http://jsbin.com/uvijuc/4/

当我在firefox中调整大小只有宽度拉伸但在chrome中宽度和高度都拉伸.我只希望宽度伸展.

看例子：

.container {
   background-image:url("http://svgshare.com/i/3cM.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:400px;
   height:200px;
   background-color:#eef;
   border-bottom:1px solid #000;
   background-size:100% 100%;
}

<div id="container1" class="container"></div>

相关问题：将背景图像 (SVG) 拉伸至 100% 宽度和 100% 高度？

我有以下代码：

.container {
  width: 1rem;
  height: 2rem;
  background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
  background-size: 100% 100%;
  border: 1px solid black;
}

<div class="container"></div>

我希望的背景图片div能充分发挥width和height的作用div。

Firefox的行为符合预期：

但是Chrome似乎有一个错误，使其有background-size不同的解释：

您可以在此小提琴中看到实时结果

重新创建背景图像将不是解决方案，因为div存在问题height。

这个Chrome错误有解决方法吗？