在后台拉伸和缩放 CSS 图像 - 仅限 CSS

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

我已经在 Stack Overflow 上看到了一些关于完成这项工作的问题，例如Stretch 和缩放 CSS 背景 。它运行良好，但我想使用background放置图像，而不是使用img标记。

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

width:100%; height:100%;

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

使用background-image声明有一个很好的方法吗？

css background

答案

CSS3 有一个很好的小属性叫做background-size:cover 。

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

你可以使用 CSS3 属性来做得很好。它调整到比例，因此没有图像失真（尽管它可以放大小图像）。请注意，它尚未在所有浏览器中实现。

background-size: 100%;

使用我提到的代码 ......

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%;
}

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

对于任何屏幕尺寸，背景图像会调整大小到浏览器视口。当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中。

使用 CSS 3，这似乎更容易。