You can use object-fit: container; for that.
See for more details and alternatives
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: auto;
}
.center-fit {
display: block;
width: 100%;
height: 100%;
position: absolute;
object-fit: contain;
}
.imageOff {
position: absolute;
left: 0px;
cursor: pointer
}
</style>
</head>
<body >
<div class="imgbox">
<div class="center-fit">
<img src= "https://via.placeholder.com/400x600.png" class="center-fit" id="mainImage" onclick="imgClick()" >
<img src= "https://via.placeholder.com/100x100.png" class="imageOff" id="lichtAus" onclick="imgClick()" style="top: 0px" visible="true" >
<img src= "https://via.placeholder.com/100x100.png" class="imageOff" id="ledsAus" onclick="imgClick()" style="top: 100px" visible="true" >
<img src= "https://via.placeholder.com/100x100.png" class="imageOff" id="loopAus" onclick="imgClick()" style="top: 300px" visible="true" >
</div>
</div>
</body>
</html>CLICK HERE to find out more related problems solutions.