html - 相对 DIV 宽度和高度

Question

我想要一个 DIV，最大 90% 高度或 90% 宽度。我只想将图片作为背景放入 DIV 中，并且完整的 svg-image 应该是可见的。在移动设备和桌面设备上。

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 **/
}