CSS set element max-width to body width минус x

Question

У меня есть атрибут img в моем HTML. Я хотел бы, чтобы max-width этого элемента равнялся ширине тела минус число, скажем 60.

Как бы это сделать? Я пробовал:

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

Но, похоже, ширина элемента равна 60.

Любые предложения?

Answer 1

Вы можете выполнять вычисления прямо в самом CSS, используя функцию известково, которая будет выглядеть следующим образом в вашем примере:

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

Важно отметить, однако, что это она по-прежнему «экспериментальный ", но текущая поддержка на удивление хороша. Вы можете узнать больше о поддержке браузеров здесь:

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

Answer 2

Да, вы можете! Но вы не сможете получить ширину тела, вы сможете использовать только литеральные значения (если вы знаете width из body, используйте это значение. Если вы хотите «жидкое» решение, используйте процентные значения на . body элемент

В ближайшем будущем, мы можем сделать это с помощью функции attr() Например:.

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

Проверить это link

---

012.

Вы можете сделать это с помощью функции calc()

Проверить это Fiddle

Будьте осторожны! Соблюдайте пробелы внутри функции!

Это не будет работать:

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

Приведенный выше пример будет работать, если вы уважаете пространства:

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

Answer 3

Вы можете использовать CSS отступы:

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

Answer 4

You сможет сделать это с помощью функции calc().

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