Question

我需要根据内容div留下的空白区域缩放背景图像。以下是示例代码：

<body class="ms-backgroundImage">
    <div id="s4-workspace">
        <div id="contentRow">
            Custom content here.
        </div>
        (Transparent white space here where the background scales.)
    </div>
</body>

例如，如果#contentRow高度为视口的60％且#s4-workspace中的空白为40％，则需要高度为40％的背景图像 - 视口的50px 。如果#contentRow为90％，我需要背景图片，高度为10％ - 50px（如果可能的话）。

限制：因为这是一个SharePoint系统，我更喜欢仅CSS修改而不是HTML（即母版页）。如果不可能，外部javascript / jquery就可以了。

Answer 1

假设您支持以下浏览器：http://caniuse.com/#search=calc

您可以使用CSS calc（）方法。

针对您的具体情况：

我需要背景图像，其高度为视口的40％ - 50px。

您可以使用以下CSS：

selector{height:calc(40vh - 50px);}

如何使用CSS

1 个答案: