Получить процент от наименьшего из размеров родительского элемента
Описание
То, что мне нужно очень похоже на vmin и vmax, но не одно и тоже.
К примеру, vmin возвращает процент от наименьшего из размеров экрана (точнее viewport, не смог точно переводить).
Мне нужно что-то, что возвращает процент от наименьшего из размеров родителя.
Вопрос
Есть ли такое, способ без костылей?
Ну... конечный вариант, есть способ с костылями?
Ответы (2 шт):
вот мой кусок кривого кода. Юзается для масштаба по минимальной стороне ,а от переменой уже стили пляшут как хотят .Там и % можно получить который тебе нужно. Цифры это вроде конкретно под мой проект можешь удалить их или оставить я уже не помню почему именно такие они за масштаб значения отвечают вроде. меняй window на кого хочешь и будет счастье.
var world_size = ()=>{
var SIZE_PX
if(window.innerHeight*1.243 > window.innerWidth) SIZE_PX = ~~parseInt(window.innerWidth*0.805*0.97)/8
else SIZE_PX = ~~parseInt(window.innerHeight*0.97)/8
document.body.style.setProperty('--world_size', SIZE_PX+'px')
}
window.onload = world_size
window.addEventListener('resize', world_size, true);
юзал как то так
chat_box {
height: calc(var(--world_size)/2.2);
width: calc(var(--world_size)/2.2);
}
Как я понял, Вам нужно добиться поведения схожего с object-fit: contain, только не для картинки, а для блока.
Предложу вариант с абсолютным позиционированием и автоотступами:
div#parent {
position: fixed;
inset: 0;
/* For example only --> */ overflow: hidden; resize: both;
}
div#child {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
max-height: 100%;
aspect-ratio: 1 / 1;
/* For example only --> */ box-shadow: inset 0 0 0 3px #f00;
}<div id="parent" style="background-color: rgb(200, 200, 200);">
<div id="child" style="background-color: rgb(100, 100, 100);"> </div>
</div>Чтобы посмотреть эффект в действии, измените размер родительского блока, ухватив его за правый нижний угол.