html - CSS 将元素最大宽度设置为主体宽度减去 x

Question

我的 HTML 中有一个 img 属性。我希望此元素的 max-width 等于 body 的宽度减去一个数字，比如 60。

我该怎么做？我试过这个:

img
{
    max-width:body.width - 60;
}

但是好像元素宽度改为设置为60。

有什么建议吗？

Answer 1

您可以使用 calc 函数直接在 CSS 本身中执行计算，在您的示例中看起来像这样:

img
{
    max-width: calc(100% - 60px);
}

重要的是要注意，虽然这仍然是一个“实验性”功能，但目前的支持非常好。您可以在此处找到有关浏览器支持的更多信息:

http://caniuse.com/#feat=calc