在后台拉伸和缩放图像的CSS - 使用CSS只 [英] Stretch and scale a CSS image in the background - with CSS only

问题描述

我想这取决于浏览器窗口大小我的背景图片拉伸和规模。

I want that my background image stretch and scale depending on the browser viewport size.

我已经看到了堆叠式和NBSP一些问题;溢出来完成这项工作，喜欢的 Stretch和规模CSS背景 的为例。它的工作原理很好，但我想用背景来放置图像，而不是用 IMG 标记。

I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want to place the image using background, not with an img tag.

在一个一个 IMG 标签的放置位置，然后用CSS，我们赞扬 IMG 标记。

In that one an img tag is placed, and then with CSS we tribute to the img tag.

width:100%; height:100%;

它的工作原理，但这个问题是有点老了，并指出，在CSS 3调整背景图像将工作pretty好。我已经试过这例如第一个，但它没T制定出适合我。

It works, but that question is a bit old, and states that in CSS 3 resizing a background image will work pretty well. I've tried this example the first one, but it didn't work out for me.

有没有好的方法与背景图片声明办呢？

Is there a good method to do it with the background-image declaration?

推荐答案

CSS3有一个名为背景大小的一个不错的属性：覆盖。这不拉伸的图像，但它会相应裁剪图像。

CSS3 has a nice little attribute called background-size:cover. This does not stretch the image, but it will crop the image accordingly.

这篇关于在后台拉伸和缩放图像的CSS - 使用CSS只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！