Увеличение под размер монитора translate

#html #css #html5

Есть строка которая уменьшает весь обьект.

.containerqwe{
 transform:scale(0.4)translate(0,500px)
}


Когда захожу в полноэкранный  режим и даю этой строке увеличение 

:-webkit-full-screen .containerqwe{

    transform:scale(0.8)translate(0,500px);


}


Весь обьект увеличивает но на разных мониторах он будет выглядит по разному где то
слишком маленьким где то большим как сделать чтобы он увеличивался под размер монитора?
может функции transform можно дать какие нибудь такие параметры 

 height: 15vh; 
  width: 15vw; 

    

Ответы

Ответ 1

Через calc() и var() еще можно было бы провернуть это дело, если бы CSS умел определять
текущий размер окна в пикселях. Но он вроде не умеет, поэтому можно пробовать через JS:

window.innerWidth дает ширину экрана в пикселях. Умножаем его на 0.15, получаем 15%.
element.clientWidth дает ширину указанного элемента. У нас это demo и у него ширина-высота
изначально заданы 150 пикселей. Разделяем 15% ширины окна на Ширину блока, получаем
коэффициент, который можно использовать для scale(); (если window.innerWidth*0.15 оказывается
= 300, то 300 / 150 как раз будет = 2, scale(2) = увеличит в два раза).

JsFiddle - здесь удобнее будет смотреть (поменяйте размер окна)



(function (){

function bubu(){
let demo = document.getElementById('demo');
let coefX = window.innerWidth*0.15/demo.clientWidth;
let coefY = window.innerHeight*0.15/demo.clientHeight;
demo.style.transform = 'scale(' + coefX + ',' + coefY + ')';

//Ненужное демо
let demo1 = document.getElementById('demo1');
demo1.innerHTML = 
'Ширина окна: ' + window.innerWidth + 
', Высота окна: ' + window.innerHeight + 
'
Ширина блока: ' + demo.clientWidth + 
', Высота блока:' + demo.clientHeight + 
'
Коэфф для scaleX: ' + coefX + 
', Коэфф для scaleY: ' + coefY;
//конец ненужного
}

bubu();
//Каждый раз вызываем функцию при изменении размера окна.
window.addEventListener('resize', function(){ bubu(); });
})();
#demo {width: 150px; height: 150px; position: absolute; margin: auto; background-color:
red; left: 0; right: 0; top: 0; bottom: 0;}

123