CSS aspect ratio 100vw OR 100vh depending on window size

You can use object-fit: container; for that.

See for more details and alternatives

        * {
            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

<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" >



CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top