Мобильная версияЯ хочу установить ширину элемента в зависимости от высоты родительского элемента, я знаю, что вы можете использовать padding-top, чтобы установить высоту в зависимости от ширины родительского элемента, возможно, кто-то знает трюк для моего случая.
Возможное решение (трюк) для Глобальная проблема заключается в установке элемента height: 100%, а затем вращении(90deg), которое имитирует ширину, равную высоте родительского элемента, но это не так. подходит для моего случая.
Конкретная проблема (возможно, можно найти обходной путь):
Упрощенная задача:
Мне нужен динамический квадратный элемент, ширина и высота которого = x, где x = высота родительского элемента.
Полная проблема:
Я хочу что-то вроде этого< /p>
где x = d / sqrt(2) (теорема Пифагора)
так что, как вы можете видеть, «d» — это высота родителя, я попробуйте
Код: Выделить всё
.blue{
background: #1AA9C8;
width: 200px;
height: 100px;
position: relative;
margin: 25px auto;
}
.blue:before{
content: '';
position: absolute;
right: calc(100% - 36px);
top: 15px;
background: firebrick;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
width: 70.9px; /* calc(100% / 1.41) here is my problem because width depends on the parent's width and I don't know how to make it depends on the parent's height
}Код: Выделить всё
Обратите внимание, что я установил фиксированную ширину потому что я не знаю, как сделать так, чтобы это зависело от высоты div.blue
Вот пример jsfiddle, который нужно сделать какой-нибудь обходной путь.
Я был бы признателен, если бы кто-нибудь мог мне помочь.
ТОЛЬКО CSS
Подробнее здесь: https://stackoverflow.com/questions/309 ... its-parent
