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

是的你可以！ 但是您將無法獲得主體的寬度，而只能使用文字值 （如果您知道body的width ，請使用該值。如果要使用“液體”解決方案，請在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 3

您將可以使用calc()函數來完成此操作。

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

Answer 4

您可以使用CSS填充：

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