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

Question

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

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

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

但似乎元素宽度设置为 60。

有什么建议么？

Answer 1

您可以使用 calc 函数直接在 CSS 本身中执行计算，在您的示例中如下所示：

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

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

//caniuse.com/#feat=calc

Answer 2

您将能够使用该calc()功能来做到这一点。

#someDiv {
    width: calc(100% - 60px);
}

Answer 3

是的你可以！但是您将无法获得主体的宽度，您只能使用文字值（如果您知道 的width，请body使用该值。如果您想要“液体”解决方案，请在body元素上使用百分比值。

在不久的将来，我们可以使用该attr()功能来做到这一点。例如：

img { width: calc(attr(body.width) - 200px); } /* This is an idea */

检查此链接。

---

您可以使用该calc()功能做到这一点

检查这个小提琴

当心！尊重函数内部的空间！

这不起作用：

img { height: calc(100px-50px) }

如果您尊重空格，上面的示例将起作用：

img { height: calc(100px - 50px) }

Answer 4

您可以使用 CSS 填充：

img {
    width:100%;
    padding: 0 30px;
}