在背景中拉伸和缩放CSS图像-仅使用CSS

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

我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。

在其中放置了一个img标签，然后用CSS向img标签致敬。

width:100%; height:100%;

它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。

是否有一个好的方法来做背景图像声明?

当前回答

background-size: 100% 100%;

拉伸背景以填充两个轴上的整个元素。

2016-01-26 18:34:37

其他回答

为了根据容器大小适当缩放图像，请使用以下方法:

background-size: contain;
background-repeat: no-repeat;

2017-01-07 18:52:38

使用我提到的代码…

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

这就产生了预期的效果:只有内容会滚动，背景不会滚动。

背景图像根据浏览器视口的大小调整为任何屏幕大小。当内容不适合浏览器视口时，用户需要滚动页面，当内容滚动时，背景图像在视口中保持固定。

使用css3，这似乎会容易得多。

2009-07-30 18:21:26

CSS3有一个漂亮的小属性，叫做background-size:cover。

这将缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。整个区域将被覆盖。但是，如果调整后的图像的宽度/高度太大，则部分图像可能不可见。

2011-09-10 14:28:56

下面的CSS部分应该在所有浏览器上扩展图像。

我对每个页面都动态地这样做。因此，我使用PHP为每个页面生成自己的HTML标记。所有图片都在“image”文件夹中，并以“Bg.jpg”结尾。

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

如果所有页面只有一张背景图片，那么你可以删除$pic变量，删除转义反斜杠，调整路径，并将此代码放在CSS文件中。

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

这是在Internet Explorer 9、Chrome 21和Firefox 14上测试的。

2012-08-06 13:41:04

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

2012-03-23 19:58:51

在背景中拉伸和缩放CSS图像-仅使用CSS

推荐文章

最新文章

标签