Search code examples
htmlcssviewportaspect-ratio

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

I'm trying to place an image centered with the height 100vh and the width auto when the browser window width is wider than the aspect ratio of the image and when I reduce the width of the browser window lower than the width of the shown image the width of the image should be 100vw and the height auto. Always keeping the aspect ratio of the image so the image is always shown completely either docking the width or height to the window. No warping and always centered where it not docks to the window.

This is what I have so far. The 3 other images will be resized and repositioned in a "body onload" JS when I can read the current position and size of the image. Yes I know that I used the class center-fit in img and div but when I change it the escalation begins

Is it maybe better to resize, place and scale the main img with JS too?

 <html>
 <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: auto;
        }
        .center-fit {
            max-width: 100%;
            height: 100vh;
            margin: auto;
        }
        .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>

Solution

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