선생님 질문이 있습니다.
div태그에 background를 넣었는데 div가 줄어들때 그 비율만큼 줄어들도록 제작을 하고 싶은데 어떻게 하면 좋을까요?
vw vh 퍼센트 등등 제가 아는 선에서 다 해봤는데 브라우저 창이 작아지면 그 비율을 못따라가네요.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
border: 1px solid blue;
width: 50%;
overflow: hidden;
}
.slot{
float: left;
margin: 0;
border: 1px solid #000;
}
.slot1{
background: url(images/machine_icon.png) repeat-y;
width: 33.3333%;
height: 200px;
/* animation: rotate 5s infinite; */
}
.slot2{
background: url(images/machine_icon.png) repeat-y;
width: 33.33333%;
height: 200px;
/* animation: rotate 5s 1s infinite; */
}
.slot3{
background: url(images/machine_icon.png) repeat-y;
width: 33.3333%;
height: 200px;
/* animation: rotate 5s 2s infinite; */
}
.slot3{}
@keyframes rotate {
0%{
background-position: 0;
}
100%{
background-position: 0 800px;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
</div>
</body>
</html>
선생님
div에 넓이 높이를 vw vh 단위로 사용해야 브라우저 크기에 따라 조절 된다고 알고있는데 어느 지점에서 잘 안맞으면 media query 외에 다른 방법이 혹시 있을까요?