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

Question

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>

You should use an image placeholder service for your demo, such as placeholder.com. — isherwood
I added a placeholder thanks but you need to view this in full page otherwise it looks kinda different. Sorry this is my very first question here. — Marlon Graeber
Sounds as though you will be using JS to calculate the positions of the other images, but how about using object-fit contain and object- position center for your main image without having to do any calculation or media queries/ viewport ratio tests? — A Haworth

user2953241 user2953241 · Accepted Answer · 2020-11-05T21:23:02

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>

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

1 Answers