Question

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

有没有办法在不切断背景图像的情况下显示背景图像？

Answer 1

您可以使用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。

Answer 2

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

background-size: 100% 100%;

如果没有，@ grc的回答是最合适的。

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

Answer 3

你也用这个：

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

我不知道你的div值，但让我们假设你已经得到了这些值。

height: auto;
max-width: 600px;

同样，这些只是随机数。使用固定宽度的div可能很难制作背景图像（如果你想要），所以最好使用max-width。实际上用背景图像填充div并不复杂，只要确保以正确的方式设置父元素的样式，这样图像就有了它可以进入的位置。

克里斯

Answer 4

您可以使用以下属性：

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

Answer 5

尝试以下任何一种方法，

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

Answer 6

version: '3.6'
services:
    vue_front:
        build: ./theme_02
        ports: 
            - "8080:80"

适合背景图像到div

6 个答案: