Расчитытать высоту пропорционально ширине calc CSS

A8
На сайте с 30.11.2020
Offline
39
281

Не могу никак с мыслями собраться, может кто уже делал подобное. Но логика подсказывает что это возможно, может синтаксис не верный.
к примеру у нас есть картинка 1240х437
мы задаем ее фоном для блока, сам блок - пустой.  ширина блока 100%, нужно растянуть высоту блока пикселями пропорционально ширине картинки.

1240 = 100%
437 = 35,24%
исходя из пропорций имеем это.

пытаюсь через calc ((1240px * 35,24%) / 100%) - ошибку пишет. где я туплю?

ps возможно с шириной 100% оно и не может работать. однако давно делал частично похожее с vw. т.е. принимал за 100%, 100vw экрана, а дальше через медиа теги.
в общем проясните пожалуйста
lutskboy
На сайте с 22.11.2013
Offline
177
#1
может  aspect-ratio поможет
W1
На сайте с 22.01.2021
Offline
304
#2
Architect88 :
ошибку пишет. где я туплю?

В нескольких местах:

- скобка после calc пишется сразу, без пробела
- десятичные знаки отделяются точкой, а не запятой
- делят и умножают на числа, а не на проценты.

Мой форум - https://webinfo.guru –Там я всегда на связи
A8
На сайте с 30.11.2020
Offline
39
#3
webinfo #:

В нескольких местах:

- скобка после calc пишется сразу, без пробела
- десятичные знаки отделяются точкой, а не запятой
- делят и умножают на числа, а не на проценты.

calc((1240px * 35.24)/100);
ура, заработало. только не скалируется 😄 😄 😄

upd а если серьезно, то сюда как то ввести зависимость от ширины блока нельзя получается? или хотя бы от 100% ширины экрана.
например calc((1240px * 35.24vw)/100vw)
W1
На сайте с 22.01.2021
Offline
304
#4
Architect88 :
ширина блока 100%
Architect88 #:
как то ввести зависимость от ширины блока

Просто задайте ширину блока 100vW, а высоту 35.2vW.

A8
На сайте с 30.11.2020
Offline
39
#5
webinfo #:

Просто задайте ширину блока 100vW, а высоту 35.2vW.

да. вполне рабочий вариант, но если блок не имеет отступов. однако если margin хотя бы 10 по бокам - начинаются небольшие искажения.
т.е. приходится давать calc(100vw - 20px). а вот высота - пока без понятия.
это не влияет особо, но ради спортивного интереса хотелось бы пофиксить.
W1
На сайте с 22.01.2021
Offline
304
#6
Architect88 #:
приходится давать calc(100vw - 20px). а вот высота - пока без понятия

То же самое, 20px уменьшаешь пропорционально.

Architect88 #:
начинаются небольшие искажения

Не знаю, что у тебя там за фон, но при использовании background-size: cover будут не искажения, а обрезка по краям, что чаще всего некритично.

A8
На сайте с 30.11.2020
Offline
39
#7

width:  calc(100vw - 40px)
height:  calc(35.24vw - 40px)

так некорректно работает. растягивается за края, значит пропорции изначальные не держит.
я полагаю что тупо от высоты те же 40пх отнять - это не будет пропорциональное уменьшение.

в целом, в этой ситуации без разницы ковер или контейн, если мы преследуем отсутствие искажений при сжатии.

ps я уж извиняюсь за такую дотошность

W1
На сайте с 22.01.2021
Offline
304
#8
Architect88 #:
я полагаю что тупо от высоты те же 40пх отнять - это не будет пропорциональное уменьшение

А вместо 40px написать 14px - не судьба?

Architect88 #:
в целом, в этой ситуации без разницы ковер или контейн, если мы преследуем отсутствие искажений при сжатии

Разница в покрытии блока. Контейн оставляет зазоры, а кавер обрезает края изображения. А искажений нет ни там, ни там.

A8
На сайте с 30.11.2020
Offline
39
#9
webinfo #:

А вместо 40px написать 14px - не судьба?

Разница в покрытии блока. Контейн оставляет зазоры, а кавер обрезает края изображения. А искажений нет ни там, ни там.

тоочно можно ж так же по пропорциям высчитать. спасибо

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий