CSS 纵横比 100vw 或 100vh 取决于 window 大小

Question

我正在尝试放置一个高度为 100vh、宽度为 auto 的图像当浏览器 window 宽度大于图像的纵横比时当我将浏览器的宽度 window 减小到低于显示图像的宽度时，图像的宽度应为 100vw，高度为 auto。始终保持图像的纵横比，以便图像始终完全显示，或者将宽度或高度停靠到 window。没有翘曲并且始终居中，它不会停靠到 window。

这就是我目前所拥有的。当我可以读取图像的当前位置和大小时，其他 3 张图像将在“body onload”JS 中调整大小和重新定位。是的，我知道我在 img 和 div 中使用了 class 居中对齐，但是当我更改它时，升级开始了

是否也可以使用 JS 调整主 img 的大小、放置和缩放更好？

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

Answer 1

您可以使用 object-fit: container;。

查看 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 纵横比 100vw 或 100vh 取决于 window 大小

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

html

css

viewport

aspect-ratio