Как расположить блок с позицией абсолют, чтобы он не заступал за края?

Question

[zeni1agent]

У меня есть вот такой код:

<div class="window">
<div class="absol">
  <div class="tes test1">вакк</div> 
  <div class="tes test2">выа</div> 
  <div class="tes test3">ссссссссс</div> 
</div>  
</div>

.window{
  width:90%;
  height:700px;
  background-color:#b32727;
  margin:10px;
  display:inline-block;
  position: relative;
  overflow: hidden;
}
.absol{
  width:100px;
  height:100px;
  background-color:#fff;
  position:absolute;
  top: 50%;
  left:50%; 
}
.tes{
  background-color:#000;
  position:absolute;
  color:#fff;
}
.test1{
  width:150px;
  height:150px;
  left:400px;
  top:10px;
}
.test2{
  width:100px;
  height:150px;
  left:-400px;
  top:100px;
}
.test3{
  width:300px;
  height:120px;
  left:-40px;
  top:-300px;
}

Пример
Мне нужно изменить размер окна, чтобы при этом менялось положение и размер всех блоков с классом tes словно весь блок window со всем содержимым это картинка.
Свойства width, height, left, top в блоках .tes динамические и поменять их на проценты не получится.
Есть ли у кого идеи как это сделать?

Comments

[Александр]

Выложите пример в онлайн редактор кода.

[zeni1agent]

Александр, НАЖМИ НА Пример.
Он там

[Ankhena]

свойства width, height, left, top в блоках .tes динамические и поменять их на проценты не получится.

Придется напрячься.

Либо задавать для window фиксированную ширину и потом считать и задавать zoom.

Answer 1

[zeni1agent]

Вот мой ответ хоть кривой но рабочий

$('document').ready(function(){ 

  
  var width3 = (parseInt ($('#tes1').css('width')) * 100 / parseInt (document.querySelector('.window').scrollWidth))+"%"
var height3 = (parseInt ($('#tes1').css('height')) * 100 / parseInt ( document.querySelector('.window').scrollHeight))+"%"

var top3 = (parseInt ($('#tes1').css('top')) * 100 / parseInt (document.querySelector('.window').scrollHeight))+"%"
var left3 = (parseInt ($('#tes1').css('left')) * 100 / parseInt (document.querySelector('.window').scrollWidth))+"%"


document.getElementById("tes1").style.height =  height3;
document.getElementById("tes1").style.width = width3;

document.getElementById("tes1").style.top =  top3;
document.getElementById("tes1").style.left = left3;
});

.window{
width:40%;
height:600px;
background-color:#b32727;
margin:10px;
display:inline-block;
position: relative;
overflow: hidden;
}

.absol{
width:100%;
height:100%;
background-color:#fff;
position:absolute;
}
.absol img {
  width:100%;
  height:100%;
}

.tes{
color:#fff;
background-color:#000;
position:absolute;
}

.test1{
 width:150px;
height:150px;
left:20px;
top:50px;
}

<div class="window">
  
  
<div class="absol">
  <img  src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
  <div class="tes test1" id="tes1">вамм</div> 
</div>  
</div>

code