适合背景图像div的

201

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

有没有办法来显示背景图片，而不切断它关掉？

来源

2011-11-20 Rajeev

比股利图像更大？ – grc

是的图像比div大 – Rajeev

454

您可以通过background-size属性（现在为supported by most browsers）来实现此目的。

要缩放背景图像以适合DIV中：

background-size: contain;

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

background-size: cover;

JSFiddle example

还存在以下filter for IE 5.5+ support ，以及vendor prefixes for some older browsers。

来源

2011-11-20 08:14:32 grc

我觉得'background-repeat：round'有最好的效果。但不幸的是，只能在Chrome上运行（直到今天）。 – Sertage

工作很好！谢谢！ – khailcs

谢谢@Sertage。我不知道背景重复也有一个圆选项:) 谢谢队友。 –

-5

它或者你改变你的div的宽度和高度或设置背景大小。

来源

2011-11-20 08:11:05 Teffi

您还可以使用此：

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

我不知道你的DIV值，但是让我们假设你有那些。

height: auto; 
max-width: 600px;

再次，这些只是随机数字。可能很难做出div的固定宽度的背景图像（如果你想），所以最好使用max-width。实际上，使用背景图像填充div并不复杂，只要确保以正确的方式对父元素进行样式设置即可，因此图像可以放置一个位置。

克里斯

来源

2015-03-24 15:58:18 Christian

如果你需要的是图像在div的尺寸相同，我觉得这是最优雅的解决方案：

background-size: 100% 100%;

如果没有，@grc答案是最拨款。

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

来源

2015-08-14 14:25:52 Sertage

到底我在找什么，谢谢:) –

最后我找到了适合整个div与背景的解决方案。谢谢！ –

为我工作。谢谢:) –

适合背景图像div的

回答

相关问题