Question

我想要一个DIV，最大高度为90％或宽度为90％。我只是想将一张图片作为DIV的背景，并且应该可以看到完整的svg图像。在移动设备和桌面设备上。

CSS：

.camera {
    position:absolute;
    background-image: url(../img/svg-bild.svg);
    background-repeat: no-repeat;
    background-position: center;
    max-height: 90%;
    max-width: 90%;
}

感谢您的帮助。

ps：我使用谷歌但无法找到有用的东西。我知道它会在哪里，但是我需要花更少的时间来搜索2个小时。

Answer 1

如果您希望不裁剪背景图片并始终适合容器，可以使用background-size: contain; （more info on MDN）。

您还需要将max-width/max-height更改为height/width，否则您的元素将具有0高度/宽度，因为它不包含任何内容：

.camera {
    position:absolute;
    background-image: url(../img/svg-bild.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain; /** add this **/
    height: 90%;  /** change this **/
    width: 90%;  /** change this **/
}

Answer 2

您可以使用background-size:cover或background-size:contain

.camera {
background-size:cover;/*background-size:contain;*/
position:absolute;
background-image: url(../img/svg-bild.svg);
background-repeat: no-repeat;
background-position: center;
max-height: 90%;
max-width: 90%;
}

Answer 3

<强> jsBin demo

.camera {
    position: absolute;
    background: url(../img/svg-bild.svg) 50% / cover;
    height: 90%;
    width: 90%;
    /*margin:auto;top:0;right:0;bottom:0;left:0; /* UNCOMMENT TO CENTER */
}

相对DIV的宽度和高度

3 个答案: