使背景图像适合div

333

我在以下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">

有没有一种方法可以显示背景图像而不将其剪切掉？

html css background-image

— 拉杰夫
source

图片比div大吗？

— grc

1

是的，图像比div大

— Rajeev

1

背景图片：url（/media/img_1_bg.jpg）; 背景大小：包含；背景重复：不重复；

— Waruna Manjula

669

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

缩放背景图像以适合div：

background-size: contain;

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

background-size: cover;

JSFiddle示例

也有一个针对IE 5.5+支持的过滤器，以及一些旧版浏览器的供应商前缀。

— grc
source

119

如果您需要的图像具有与div相同的尺寸，我认为这是最优雅的解决方案：

background-size: 100% 100%;

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

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

— tage
source

最后，我找到了使整个div与背景匹配的解决方案。谢谢！

— 卡米尔Rykowski

5

但这会拉伸图像...有没有办法在不拉伸的情况下适合背景图像？

— Junaid

1

长宽比却丢失了。

— 学习者

@Learner如果您在不裁剪图像的情况下更改图像的尺寸，则长宽比将丢失99％。这是常识。

— Vaibhav Vishal，

11

您可以使用以下属性：

background-size: contain;
background-repeat: no-repeat;

然后您的代码如下所示：

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

— hojjat.mi
source

8

您还使用此：

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

我不知道您的div值，但让我们假设您已经掌握了这些值。

height: auto;
max-width: 600px;

同样，这些只是随机数。要使div的宽度固定的背景图像（如果需要）非常困难，因此最好使用max-width。实际上，用背景图像填充div并不复杂，只需确保以正确的方式设置父元素的样式，这样图像就可以放进去了。

克里斯

— 基督教
source

链接至获得高度评价的答案，其中详细讨论了该解决方案：stackoverflow.com/questions/600743/…，并向您展示如何计算padding-top。

— 约翰·李