将背景图片适合div [英] Fit background image to div

问题描述

我在下面的div中有一张背景图片，但图片被剪掉：

I have a background image in the following div, but the image gets cut off:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法显示背景图片而不剪掉？

Is there a way to show the background image without cutting it off?

推荐答案

您可以使用 background-size 属性，现在是支持的

You can achieve this with the background-size property, which is now supported by most browsers.

要缩放背景图片以适合div：

To scale the background image to fit inside the div:

background-size: contain;

要缩放背景图片以覆盖整个div：

To scale the background image to cover the whole div:

background-size: cover;

JSFiddle示例

还有一个适用于IE 5.5+支持的过滤器，以及某些旧版浏览器的供应商前缀。

There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.

这篇关于将背景图片适合div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！