在背景中拉伸和缩放 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 声明的好方法?

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

推荐答案

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

CSS3 has a nice little attribute called background-size:cover.

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

This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.

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