在背景中拉伸和缩放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.

我看到了一些关于Stack Overflow的问题， 伸展和缩放CSS背景 例如。它工作得很好，但我想使用 background 而不是 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调整背景图像将工作相当不错。我试过此示例第一个

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.

有一个很好的方法来处理 background-image background-size：cover c> c $ c>声明？

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

推荐答案

/ code>。这不会拉伸图像，但它会相应地裁剪图像。

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屋！