适合背景图像到div

我在后面的div中有一个背景图片,但是图片被切掉了:

<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"> 

有没有办法显示背景图像而不切断它?

您可以使用background-size属性来实现此function,现在大多数浏览器都支持该属性。

要缩放背景图像以适应div的内容:

 background-size: contain; 

要缩放背景图像来覆盖整个div:

 background-size: cover; 

JSFiddle示例

还有一个用于IE 5.5+支持的filter ,以及一些旧浏览器的供应商前缀 。

如果你需要的是图像具有相同的尺寸的div,我认为这是最优雅的解决scheme:

 background-size: 100% 100%; 

如果不是,@grc的答案是最合适的。

资料来源: http : //www.w3schools.com/cssref/css3_pr_background-size.asp

你也使用这个:

 background-size:contain; height: 0; width: 100%; padding-top: 66,64%; 

我不知道你的div值,但是让我们假设你有这些。

 height: auto; max-width: 600px; 

再次,那些只是随机数字。 这可能很难做的背景图像(如果你想要)固定宽度的div,所以更好的使用最大宽度。 实际上,用背景图像填充div并不复杂,只要确保以正确的方式对父元素进行样式设置,就可以使图像具有可以放置的位置。

克里斯

它要么改变你的div的宽度和高度,要么设置背景大小。