Как сверстать букву во всю высоту блока авто-высоты?

Question

[#FFFFFF]

Всем привет!
В макете на разных страницах баннеры, на которых в виде декоративного элемента первая буква названия услуги. Баннер везде зависит от размера содержимого. А буква должна всегда быть в 100% высоты!
Пробую делать с псевдо-элементом, но никак не могу понять, как подстроить размер шрифта буквы.
Пробовала определять высоту блока с помощью .height(), чтобы потом что-то с этим придумать, но почему-то высота определяется неправильно - может, из-за паддингов и марджинов... в общем, help!

Comments

[Андрей Б.]

Приложите скрин. Не понятно как это выглядит.

Answer 1

[Андрей Б.]

Сделать такое на CSS не получится, можно на JS, но овчинка не стоит выделки, поэтому делайте картинкой и не парьтесь.
Дизайнер придумал, пусть теперь рисует буковки под каждый слайд.

UPD: Решение так себе, https://jsfiddle.net/gzpjyfb2/ (поиграть с высотой div)

Comments

[Сергей Горячев]

Поддерживаю. Делайте картинками.

[Sergei Nazarenko]

ну можно через медиазапросы подбирать размер шрифта

[Sergei Nazarenko]

но да через картинки это будет менее затратно

[Андрей Б.]

Sergei Nazarenko не выйдет, от вьюпорта тут ничего не зависит, содержимое определяет высоту баннера

[Sergei Nazarenko]

Андрей Б.: выйти то выйдет если задавать высоту банера и размер шрифта но это да это не комильфо ибо портянка получится ой ой

[Sergei Nazarenko]

Андрей Б.: как то так https://jsfiddle.net/nazares/fn28dvmh/

[Андрей Б.]

Sergei Nazarenko Это обычное решение в адаптивной верстке. У автора другая ситуация. Представьте два баннера с разной высотой, буква должна под неё подстраиваться. Я накидал пример на SVG, буква реагирует на высоту контейнера но точно подогнать её под края геморно. Куча нюансов накладывается. Поэтому выкладывать не буду )

[Sergei Nazarenko]

Андрей Б.: так я и не говорил что это лучшее решение, я всего лишь сказал что можно и да геморно об этом я сразу и сказал

[Sergei Nazarenko]

Андрей Б.: PS да сори не внимательно прочитал что размер блока зависит от содержимого

[Андрей Б.]

Sergei Nazarenko https://jsfiddle.net/gzpjyfb2/ высотой дива поиграйте

[Sergei Nazarenko]

Андрей Б.: +

Answer 2

[SirMustache]

Можно через vw
https://jsfiddle.net/7xbtexjj/

Comments

[Андрей Б.]

SirMustache автору нужно относительно высоты баннера

[Сергей Горячев]

Косяк.

Answer 3

[Gleb Gryadk.in]

line-height
object-fit
box-sizing
что-то из этого должно помочь.