I work with resizable objects, and i have small issues, i want to resize div box, for this i use css:
resize: both;
overflow: auto;
And this working good for me, but i want when i resize div, i want to resize text and image inside the box, for now i not found solution how to creating this in good direction.
.lpms3-box {
position: fixed;
cursor: pointer;
}
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
resize: both;
overflow: auto;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
z-index: 1111112;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}<div class="lpms3-box">
<div class="box" id="box${i}">
<div class="machine-icon" id="machine${i}">
<img src="https://cdn-icons-png.flaticon.com/512/1814/1814403.png" onerror="hideEl('machine${i}')" />
</div>
<div class="title-box stantion-name">${data.stantionName}</div>
<div class="desc-box">${data.status}</div>
</div>
</div>