CSS将元素max-width设置为body width减去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

是的，你可以！但是你无法获得身体的宽度，你只能使用文字值（如果你知道width的{​​{1}}，则使用该值。你想要一个“液体”解决方案，使用body元素上的百分比值。

在不久的将来，我们可以使用body函数执行此操作。例如：

attr()

选中 link 。

---

您可以使用img { width: calc(attr(body.width) - 200px); } /* This is an idea */ 功能

执行此操作

选中 Fiddle

小心！尊重函数内的空格！

这不起作用：

calc()

如果你尊重这些空格，上面的例子就可以了：

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

Answer 3

您可以使用calc()功能执行此操作。

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

Answer 4

您可以使用CSS填充：

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